码迷,mamicode.com
首页 > 移动开发 > 详细

appendChild()插入节点需注意的问题

时间:2015-01-09 19:06:11      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

第一点:首先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()插入节点需注意的问题

标签:

原文地址:http://www.cnblogs.com/cdwp8/p/4213856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!