html网站首页,国内广告公司,深圳全网推广怎么投放,免费自助音乐网站申请首先 从定义来理解 这两个方法#xff1a; appendChild() 方法#xff1a;可向节点的子节点列表的末尾添加新的子节点。语法#xff1a;appendChild(newchild) insertBefore() 方法#xff1a;可在已有的子节点前插入一个新的子节点。语法 #xff1a;insertBefore(newchi…首先 从定义来理解 这两个方法 appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。语法appendChild(newchild) insertBefore() 方法可在已有的子节点前插入一个新的子节点。语法 insertBefore(newchild,refchild) 相同之处插入子节点 不同之处实现原理方法不同。 appendChild 方法是在父级节点中的子节点的末尾添加新的节点相对于父级节点来说。 insertBefore 方法是在已有的节点前添加新的节点相对于子节点来说的。 来看个这个简单的实例在id为box-one 的末尾添加一个子节点div 1 div classbtns input typebutton value插入元素 idcreatbtn//div
2 div idbox-one
3 p classcon2 idp11/p
4 p classcon2 2/p
5 p classcon2 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就不会出错。转载于:https://www.cnblogs.com/zhangym118/p/5872299.html
