您的位置:首页 > 其它

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

2014-03-19 21:53 204 查看
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>
效果:


来自为知笔记(Wiz)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: