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時，結果如下：