原生js删除节点、替换节点、复制节点

1、removeChild() 用来删除父节点的一个子节点。
parent.removeChild(childNode);
如下：

<div id="box">
    <p id="p1">这是一个段落</p>
    <p id="p2">第二个段落</p>
</div>
<script>
    var box=document.getElementById("box");  //找到父元素
    var p1=document.getElementById("p1");    //找到子元素    
    box.removeChild(p1);  
    //也可以通过要删除的子节点的父节点删除子节点
    p1.parentNode.removeChild(p1);                  
</script>

2、replaceChild() 用新节点替换某个子节点。
parent.replaceChild (newnode,oldnode ) ；
如下：

<div id="box">
    <p id="p1">这是一个段落</p>
    <p id="p2">第二个段落</p>
    <div id="div1">这是div</div>
</div>
<script>
    var box=document.getElementById("box");  //找到父元素
    var p1=document.getElementById("p1");    //找到要替换的元素

    var p3=document.createElement('p');//创建要替换的元素
    p3.innerHTML="这是第三个段落";  //为创建的元素赋值
    box.replaceChild(p3,p1);  //替换节点
    p1.parentNode.replaceChild(p3,p1); //通过parentNode节点替换
</script>

注意：新节点可以是文档中某个已存在的节点，也可以创建新的节点。

3、cloneNode() 复制节点并返回复制的节点
node.cloneNode(true|false) ; //默认是 false。
参数设置为 true，克隆节点及其属性，以及后代；设置为 false，克隆节点本身
如下：

<div id="main">
    <div id="box">
        <p id="p1">这是一个段落</p>
        <p id="p2">第二个段落</p>
    </div>
</div>
<script>
    var main=document.getElementById("main"); 
    var box=document.getElementById("box"); 

    var newNode=box.cloneNode(true);
    main.appendChild(newNode);
    console.log(main);
</script>

当参数为true时，结果如下：

当参数为false时，结果如下：