起首 从界说来懂得 这两个办法:
appendChild() 办法:可向节点的子节点列表的末端添加新的子节点。语法:appendChild(newchild)
insertBefore() 办法:可在已有的子节点前插进一个新的子节点。语法 :insertBefore(newchild,refchild)
雷同的地方:插进子节点
分歧的地方:实现道理办法分歧。
appendChild办法是在父级节点中的子节点的末端添加新的节点(相对父级节点 来讲)。
insertBefore 办法 是在已有的节点前添加新的节点(相对子节点来讲的)。
来看个这个简朴的实例:在id为box-con 的末端添加一个子节点div
复制代码 代码以下:
1
2
3
复制代码 代码以下:
window.onload = function () {
var btn = document.getElementById("creatbtn");
btn.onclick = function() {
insertEle();
}
}
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
newNode.innerHTML = " This is a newcon ";
//oTest.appendChild(newNode);
oTeset.insertBefore(newNode,null); // 这两种办法都可实现
}
这个insertBefore 的第一个参数 和appendChild的一样,都是谁人新的节点变量,而insert第二个参数不但可认为null 。也能够如许写呢
复制代码 代码以下:
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML = " This is a newcon ";
oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插进到 id为p1的元素前面
}
或
复制代码 代码以下:
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML = " This is a newcon ";
oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插进到 id为p1背面节点元素的 前面,
也就是说 插进id为P1节点元素的背面。
}
这里想说的是 nextSibling :某个元素以后紧跟的元素(处于统一树层级中)。
reforeNode.nextSibling :获得的是reforeNode工具的紧随着的下一个节点。
previousSibling - 获得某节点的上一个同级节点
因为可见insertBefore()办法的特征是在已有的子节点前面插进新的节点然则两种情形联合起来发明insertBefore()办法插进节点,是可以在子节点列表的随意率性地位。
呵呵呵。。。有些办法不但是感化于界说的那些特征,只要 相符语法,联合一些属性总会成心想不到的收成。
原文链接:http://daima2.banzhu.com/article/daima2-8-2934799.html
分享到:
相关推荐
js中AppendChild与insertBefore的用法详细解析.docx
本篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的对比。需要的朋友可以过来参考下,希望对大家有所帮助
几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild、insertBefore和insertAfter做个总结
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...
主要是对js中AppendChild与insertBefore的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
本文实例讲述了js在指定位置增加节点函数insertBefore()用法。分享给大家供大家参考。具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码如下: 代码如下:<html> <...
主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下
obj = document.createElement(tag)创建一个标签,oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用,appendChild将创建的元素依次加在后面,而insertBefore则可以将...
主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下: JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...
js原生appendChild的bug解决心得分享.docx
xml技术文档 getElementsByTagname() ,添加节点 - appendChild()