JavaScript中DOM节点的增删改查-向日葵屋

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)
    }