开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

节点操作

不仅我们的数组有增删改查，在我们的节点中也有这样的操作，让我们一起学一学看一看如何操作节点

这是我的body中的代码：

     <div id="box">
          <div id="child">
              111111
          </div>
     </div>

新增节点

新增节点的前提当然是我们得有一个节点：
所以我们先新建一个节点：

    var obox=document.createElement('div')
    obox.innerText='我是新的节点'
    obox.style.background='yellowgreen'
    obox.id='child1'
    console.log(obox);
     

新增节点有两种方法：

1.      appendChild
        但是他默认插入在这个父节点中的最后一个
   

2.      insertBefore(要插队的"坏蛋"节点，被插队的"老实"节点)
        在哪个节点前插入你准备的节点
   

删除节点

如果是单单只想删掉其中一个子节点的话可以使用removeChild方法，括号中的值为你想要删除的子节点，但是想要连同这个父元素一起删除就可以用remove这个方法，括号中不需要添加

    删除节点(删除子节点)
    box.removeChild(obox)

    remove方法，将自己和自己所有的后代都给删除掉
    box.remove()

替换节点

替换节点相对来说就比较简单，只要给他一个你需要替换进去的节点和一个被替换的节点，他就可以将这个节点放在被替换掉的节点原来的位置。

  // 替换节点 replaceChild(新的节点，老的节点)
    var obox2=document.createElement('div')
    obox2.innerText='222222'
    box.replaceChild(obox2,child)

克隆节点

克隆节点 cloneNode()
括号中不写的话默认为false，不克隆里面的子节点，想要克隆里面的子节点就得在括号中写true

     var cloneBox =box.cloneNode(true)
     cloneBox.id='nn' //我们给他的id名重新赋值
    document.body.appendChild(cloneBox)

但是克隆出来之后你就会发现他俩完全一模一样这就不符合我们的命名规定了，所以我们可以在把克隆出来的节点放进页面前，改变他影响我们操作的重复属性。比如：改变他的id值

注意

在节点的操作方法中，括号中的值都为一个节点对象，并不是传入的值