JS添加、删除节点

增加节点的方法：

1、使用appendChild()

语法：父元素.appendChild(要添加的节点)

<div class="box" style="width: 400px;height:300px;border:10px dashed pink;text-align: center;padding: 20px;">
    <div class="a">这是旧的内容</div>
    <div class="b">bbb</div>
</div>
<button id="btn1">添加节点</button>
<button id="btn2">删除节点</button>

<script>
    document.getElementById('btn1').onclick = function(){//给 btn1 增加点击事件
        //1、创建一个标签对象  p
        var pObj = document.createElement('p');
            //1.1 增加的内容
            pObj.innerHTML = "这是增加的 p";
            //1.2 获取对象增加的位置
            var box = document.getElementsByClassName('box')[0];
            //1.3 把标签 p 添加到 box 中【追加】
            box.appendChild(pObj)   //在 box 的最后面添加对象
    }
</script>

2、使用insertBefore()

语法：父元素.insertBefore(要添加的节点,添加的位置)

var a = document.getElementsByClassName('a')[0];
var b = document.getElementsByClassName('b')[0];

box.insertBefore(pObj,a) //在 a 的前面添加 pObj
box.insertBefore(pObj,b) //在 b 的前面添加 pObj

删除节点的方法：

1、使用removeChild()

语法：父元素.removeChild(要删除的节点对象)

document.getElementById('btn2').onclick = function(){//给 btn2 增加点击事件
    //获取父元素
    var box = document.getElementsByClassName('box')[0];
    //删除 box 中的第一个子元素
    box.removeChild(box.childNodes[0]);
}

2、使用remove()

语法：要删除的对象.remove()

remove()可用于删除父节点上的左右元素，包括文本和子节点

document.getElementById('btn2').onclick = function(){  //给 btn2 增加点击事件
    //获取要删除的元素节点
    var box = document.getElementsByClassName('box')[0];
    //删除元素节点
    box.remove()
}