JavaScript中DOM节点的增删改查

妖狐艹你老母 2023-02-14 00:29 17阅读 0赞

## JavaScript中DOM节点的增删改查 ##

前面一篇文章我们讲到了DOM节点的查询(遍历)，这篇文章把剩下的增删改一一进行讲解。

**HTML代码：**

<h1>04DOM节点的增删改</h1>
        <div class="box">
            <p class="text1">这是一个段落标签01</p>
            <p class="text2">这是一个段落标签02</p>
            <p class="text3">这是一个段落标签03</p>
            <p class="text4">这是一个段落标签04</p>
        </div>
    
    
        <hr>
        <button>添加</button>
        <table border="1">
            <tr>
                <td>111111</td>
                <td>222222</td>
                <td><button>删除</button><button>编辑</button></td>
            </tr>
            <tr>
                <td>111111</td>
                <td>222222</td>
                <td><button>删除</button><button>编辑</button></td>
            </tr>
            <tr>
                <td>111111</td>
                <td>222222</td>
                <td><button>删除</button><button>编辑</button></td>
            </tr>
            <tr>
                <td>111111</td>
                <td>222222</td>
                <td><button>删除</button><button>编辑</button></td>
            </tr>
            <tr>
                <td>111111</td>
                <td>222222</td>
                <td><button>删除</button><button>删除</button></td>
            </tr>
        </table>

**CSS代码：**

p{ 
                color: white;
            }
            .text1{ 
                background: red;
            }
            .text2{ 
                background: yellow;
            }
            .text3{ 
                background: blue;
            }
            .text4{ 
                background: green;
            }

#### 1.增(创建元素，添加元素) ####

var oBox=document.getElementsByClassName("box")[0];
        var aText=document.getElementsByTagName("p");
        // 增 
        // createElement("标签/元素节点名") 创建一个元素节点
        var newP=document.createElement("P");//大写标签名
        newP.innerText="这是一个段落标签05";
        newP.style.backgroundColor="purple";
    
        var newP2=document.createElement("P");//大写标签名
        newP2.innerText="这是一个段落标签06";
        newP2.style.backgroundColor="orange";
    
        var newP3=document.createElement("P");//大写标签名
        newP3.innerText="这是一个段落标签07";
        newP3.style.backgroundColor="orange";
    
    
    
        // parentNode.appendChild(添加的节点) 向父元素的子节点末尾添加
        oBox.appendChild(newP);
        // parentNode.insertBefore(添加的节点,参考的元素) 向兄弟元素前面添加
        oBox.insertBefore(newP2,aText[2]);
        // innerHTML

#### 2.改(替换元素) ####

// parentNode.replaceChild(新元素,旧元素)
        // oBox.replaceChild(aText[1],aText[3]);
        oBox.replaceChild(newP3,aText[0]);

#### 3.删(移除节点) ####

// parentNode.removeChile(要删除的子节点)
        oBox.removeChild(aText[1]);
        
        var oBtn=document.getElementsByTagName("button")[0];
        oBtn.onclick=function(){ 
            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
        }

**视频讲解链接：  
https://www.bilibili.com/video/BV1qv411z7t9/**