,,初学js插入节点appendChild insertBefore使用方法
可以看出insertBefore()方法的特点是在已有的子节点前面插入一个新节点。但是，当两种情况结合在一起时，发现insertBefore()方法插入了一个节点，这个节点可以是子节点列表中的任何位置。
首先从定义上理解这两个方法：appendChild()方法：可以在一个节点的子节点列表的末尾添加一个新的子节点。语法：append child(new child)insert before()方法：可以在现有子节点之前插入新的子节点。语法：insertBefore(newchild，refchild)。相似性：插入子节点。区别：实现原理和方法不同。AppendChild方法是在父节点中的子节点末尾添加一个新节点(相对于父节点)。insertBefore方法是在现有节点之前添加一个新节点(相对于子节点)。看看这个简单的例子：在id box-con的末尾添加一个子节点div，复制代码如下：Div class=' btns ' input type=' button ' value=' insert element ' ID=' creat BTN '//Div ID=' box-one ' p class=' con 2 ' ID=' P1 ' 1/p p class=' con 2 ' 2/p p class=' con 2 ' 3/p/Div复制代码如下：window . onload=function(){ var BTN=document . getelementbyid(' cre} }函数insertEle(){ var oTest=document . getelementbyid(' box-one ')；var new node=document . createelement(' div ')；newNode.innerHTML='这是一个新图标'；//otest . appendchild(new node)；oTeset.insertBefore(newNode，null)；//两种方法都可以实现}这个insertBefore的第一个参数是像appendChild的新节点变量，insert的第二个参数不能只有null。也可以这样写。复制代码如下：函数insert(){ var o test=document . getelementbyid(' box-one ')；var new node=document . createelement(' div ')；var ref orenode=document . getelementbyid(' P1 ')；newNode.innerHTML='这是一个新图标'；oTest.insertBefore(newNode，ref orenode)；//在id为p1的元素前插入新创建的元素节点或者复制代码如下：Function Insert(){ var O Test=document . getelementbyid(' box-one ')；var new node=document . createelement(' div ')；var ref orenode=document . getelementbyid(' P1 ')；newNode.innerHTML='这是一个新图标'；oTest.insertBefore(newNode，ref orenode . next sibling)；//新创建的元素node插在id为p1的node元素前面，也就是说id为P1的node元素插在后面。}这里我要说的是nextSibling:紧跟在一个元素之后的元素(在同一个树级中)。
获取ReforeNode对象的下一个节点。
获取一个节点的前一个兄弟节点。
可以看出insertBefore()方法的特点是在已有的子节点前面插入一个新节点。但是，当两种情况结合在一起时，发现insertBefore()方法插入了一个节点，这个节点可以是子节点列表中的任何位置。
呵呵呵。有些方法不只是作用于定义好的特性，只要符合语法，组合一些属性总会有意想不到的收获。
作为初学者，我知道的不多。可能我的理解还比较浅，有些可能是错的。希望看到的能给我一些建议。我别无所求。在这里只想记录点点滴滴，学习大家的建议，促进自己的成长。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。