JavaScript中DOM节点的增删改查

JavaScript中DOM节点的增删改查

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

HTML代码：

    <h1>04DOM节点的增删改h1>
    <div class="box">
        <p class="text1">这是一个段落标签01p>
        <p class="text2">这是一个段落标签02p>
        <p class="text3">这是一个段落标签03p>
        <p class="text4">这是一个段落标签04p>
    div>


    <hr>
    <button>添加button>
    <table border="1">
        <tr>
            <td>111111td>
            <td>222222td>
            <td><button>删除button><button>编辑button>td>
        tr>
        <tr>
            <td>111111td>
            <td>222222td>
            <td><button>删除button><button>编辑button>td>
        tr>
        <tr>
            <td>111111td>
            <td>222222td>
            <td><button>删除button><button>编辑button>td>
        tr>
        <tr>
            <td>111111td>
            <td>222222td>
            <td><button>删除button><button>编辑button>td>
        tr>
        <tr>
            <td>111111td>
            <td>222222td>
            <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/