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

第一点：首先appendChild插入节点时返回的值是插入的节点本身，另外必须要找到所要插入的父节点：

 var returnNode = parentNode.appendChild(childNode);

 console.log(returnNote===childNode);//true

第二点：appendChild所要插入的新节点如果存在于文档流中，那么此时并不会把心节点复制然后插入到这个父节点下，而是把这个新节点从源文档流中移动到所要插入的父节点下：

 <div id="test">

     <div>adscasdjk</div>

     <div id="a">adscasdjk</div>

 </div>

 <script type="text/javascript">

     var t = document.getElementById("test");

     var a = document.getElementById('a');

     //var tt = a.cloneNode(true);

     t.appendChild(a);

 </script>

这样有js代码和没有js代码的表现是一样的，但是在fireBug下可以清楚地发现有id的div移动到了没有id的那个div前面去了；也即是id='a'的div只是移动到了父节点下而已。

 <div id="test">

     <div>adscasdjk</div>

     <div id="a">adscasdjk</div>

 </div>

 <script type="text/javascript">

     var t = document.getElementById("test");

     var a = document.getElementById('a');

     var tt = a.cloneNode(true);

     t.appendChild(tt);

 </script>

解决的方法就是将所要插入的节点clone一下在插入到相应位置，这样就可以达到预期的效果了

巴特西

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

最新文章

热门文章