DOM——操作节点

appendChild()

用于向 childNodes 列表的末尾添加一个节点，添加节点后，childNodes 新增节点，父节点及以前的最后一个子节点的关系指针都会得到相应的更新。更新完成后，appendChild() 返回新增的节点。

• 小例子

  
  
  


  
 
Coffee
Tea
  点击

• 效果展示

点击按钮之前

点击按钮之后

insertBefore()

如果需要把节点放在 childNodes 列表中某个特定的位置上，而不是放在末尾上，那么可以使用 insertBefore() 方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后会变成参照节点的前一个同胞节点(previouslibing),同时被方法返回。如果参照节点是 null ,则 insertBefore() 与 appendChild() 执行相同的操作。

• 小例子

  
  
  


Coffee
Tea
试一下

效果展示

点击按钮之前

点击按钮之后

replaceChild

• replaceChild() 方法接受两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据它的位置。
• 在使用 replaceChild() 插入节点的时候，该节点的所有关系指针都会从被它替换的节点复制过来。从技术上讲，被替换的节点仍然存在于文档中，但是文档中已经没有了自己的位置。

• 小例子

  
  
  


  
a
b
c
  
  点击

 

• 效果展示

点击按钮之前

点击按钮之后

removeChild()

这个方法接受一个参数，即要移除的节点，被移除的节点将会成为方法的返回值。

  
  
  


  
a
b
 
c
  点击

• 效果展示

点击按钮之前

点击按钮之后