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)
}
视频讲解链接:
https://www.bilibili.com/video/BV1qv411z7t9/
还没有评论,来说两句吧...