DOM拷贝一个节点并插入页面

javascript的cloneNode方法可以拷贝一个节点;
方法:
1、找到要拷贝的节点;
2、利用cloneNode方法进行拷贝该节点;
3、找到该节点的父节点;
4、拷贝该节点;
javascript示例:
        DOM.addEvent(window,'load',function(){
            DOM.log.header('Clone and Move a Node');
            var fireFoxLi = document.getElementById('safari');
            var firefoxLiClone = fireFoxLi.cloneNode(true);
            var unorderedList = fireFoxLi.parentNode;
            //下免得代码通过 document.getElementById('safari');方法取得并吧该节点赋值给firefoxLi变量后;
            //你得到的只是该节点的应用,并没有获得该节点的副本;
            unorderedList.appendChild(fireFoxLi);
            unorderedList.appendChild(document.createElement('BR'));
            unorderedList.appendChild(firefoxLiClone);//这句话添加了新的节点
        });

html文件:
 This is my HTML page. <br>
    <div id='firefox' ></div>
    <hr/>
    <div>
        <ul>
            <li id='firefoxListItem' title="firefox">
                <a href="#" title="get Firefox" id="firefox">Firefox 2.0</a>
            </li>
            <li>
                <a href="#" title="getMicrsoft Inter" id='msie'>ie11</a>
            </li>
            <li>
                <a href="#" title="check out safari" id='safari'>safari</a>
            </li>
            <li>
                <a href="#" title="getOpera" id='Opera'>Opera</a>
            </li>
        </ul>
    </div>
效果:




posted @ 2014-03-19 21:53  thero  阅读(336)  评论(0编辑  收藏  举报