js:插入节点appendChild insertBefore使用方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js:插入节点appendChild insertBefore使用方法相关的知识,希望对你有一定的参考价值。

首先 从定义来理解 这两个方法: 
appendChild() 方法:可向节点的子节点列表末尾添加新的子节点。语法:appendChild(newchild) 
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild) 
相同之处:插入子节点 
不同之处:实现原理方法不同。 
     appendChild 方法是在父级节点中子节点的末尾添加新的节点(相对于父级节点来说)。 
     insertBefore  方法是在已有的节点前添加新的节点(相对于子节点来说的)。 

 

来看个这个简单的实例:在id为box-one 的末尾添加一个子节点div 

1 <div class="btns">
  <input type="button" value="插入元素" id="creatbtn"/>
</div> 2 <div id="box-one"> 3   <p class="con2" id="p1">1</p> 4   <p class="con2" >2</p> 5   <p class="con2" >3</p> 6 </div>
 1 window.onload = function () { 
 2   var btn = document.getElementById("creatbtn"); 
 3   btn.onclick = function() { 
 4     insertEle(); 
 5   } 
 6 } 
 7 function insertEle() { 
 8   var oTest = document.getElementById("box-one"); 
 9   var newNode = document.createElement("div"); // createElement 是在对象中创建一个对象
10   newNode.innerhtml = " This is a newcon "; 
11   //oTest.appendChild(newNode); 
12   oTeset.insertBefore(newNode,null); // 这两种方法均可实现 或者oTeset.insertBefore(newNode,oTeset.childNodes[0])
     13 }

这个insertBefore 的第一个参数 和appendChild的一样,都是那个新的节点变量,而insert第二个参数不仅可以为null 。也可以这样写:

1 function insertEle() { 
2   var oTest = document.getElementById("box-one"); 
3   var newNode = document.createElement("div"); 
4   var reforeNode = document.getElementById("p1"); 
5   newNode.innerHTML = " This is a newcon "; 
6   oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面 
//或者oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的前面,也就是说 插入id为P1节点元素的后面。 
7}

nextSibling :某个元素之后紧跟的元素(处于同一树层级中)。 

reforeNode.nextSibling :取得的是reforeNode对象的紧跟着的下一个节点。 
previousSibling - 取得某节点的上一个同级节点。


//appendChild无法设置想要插入的明确位置 //oTest.appendChild(oP2); //insertBefore则可以设置 //oTest.insertBefore(oP2,null); //oTest.insertBefore(oP2,oP1); //oTest.insertBefore(oP2,oP1.nextSibling); //oTest.insertBefore(oP2,oP3.previousSibling); //oTest.insertBefore(oP2,oTest.childNodes[0]);

 

好了那么有insertBefore的应该也有insertAfter吧? 
好那我们来用Aptana编写一个例子吧,但Aptana的智能提示告诉我其实没有insertAfter这个方法 
那么就自己定义一个罗
insertAfter定义 

1 function insertAfter(newEl, targetEl) { 
2     var parentEl = targetEl.parentNode; 
3     if(parentEl.lastChild == targetEl) { 
4         parentEl.appendChild(newEl); 
5     }else { 
6         parentEl.insertBefore(newEl,targetEl.nextSibling); 
7     } 
8 }     

 

总结: 
1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数 
2、insertBefore相对于appendChild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。 
3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必须有共同的父节点

 

如果只从DOM操作的性能上分析,appendChild和insertBefore这两个方法本身是没有太大差异的。但是insertBefore本身具有appendChild无法比拟的功能,它对插入元素的位置是可以选择的。因此它对页面可能造成的影响也更大,渲染的开销也可能更大。

最后顺便说一下,在IE6上,文档加载完毕之前使用appendChild会出错,而使用insertBefore就不会出错。

以上是关于js:插入节点appendChild insertBefore使用方法的主要内容,如果未能解决你的问题,请参考以下文章

js里用append()和appendChild有什么区别?

在 JS 中对同一个节点多次使用 appendChild

插入节点appendChild()

JQuery之append和appendTo的区别,还有js中的appendChild用法

JS 2020/6/02

JS 2020/6/02