首页 > 代码库 > appendChild()插入节点需注意的问题
appendChild()插入节点需注意的问题
第一点:首先appendChild插入节点时返回的值是插入的节点本身,另外必须要找到所要插入的父节点:
1 var returnNode = parentNode.appendChild(childNode);2 console.log(returnNote===childNode);//true
第二点:appendChild所要插入的新节点如果存在于文档流中,那么此时并不会把心节点复制然后插入到这个父节点下,而是把这个新节点从源文档流中移动到所要插入的父节点下:
1 <div id="test"> 2 <div>adscasdjk</div> 3 <div id="a">adscasdjk</div> 4 </div> 5 <script type="text/javascript"> 6 var t = document.getElementById("test"); 7 var a = document.getElementById(‘a‘); 8 //var tt = a.cloneNode(true); 9 t.appendChild(a);10 </script>
这样有js代码和没有js代码的表现是一样的,但是在fireBug下可以清楚地发现有id的div移动到了没有id的那个div前面去了;也即是id=‘a‘的div只是移动到了父节点下而已。
1 <div id="test"> 2 <div>adscasdjk</div> 3 <div id="a">adscasdjk</div> 4 </div> 5 <script type="text/javascript"> 6 var t = document.getElementById("test"); 7 var a = document.getElementById(‘a‘); 8 var tt = a.cloneNode(true); 9 t.appendChild(tt);10 </script>
解决的方法就是将所要插入的节点clone一下在插入到相应位置,这样就可以达到预期的效果了
appendChild()插入节点需注意的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。