JavaScript 删除节点
■知识点
removeChild()方法可以从子节点列表中删除某个节点。其用法如下:
nodeObject.removeChild(node)
其中,参数node为要删除节点。如果删除成功,则返回被删除节点;如果失败,则返回null。
当使用removeChildO方法删除节点时,该节点所包含的所有子节点将同时被删除。
■实例设计
【示例1】在下面的示例中单击按钮时将删除红盒子中的一级标题。
<div id="red">
<hl>红盒子</hl>
</div>
<div id="blue">蓝盒子</div>
<button id="ok">移动</button>
<script>
var ok = document.getElementByld("ok"); //获取按钮元素的引用
ok.onclick = function (){ //为按钮注册一个鼠标单击事件处理函数
var red = document.getElementByld ("red"); //获取红盒子的引用
var hi = document.getElementsByTagName("hi")[0]; //获取标题元素的引用
red. removeChild (hi) ; //移出红盒子包含的标题元素
}
</script>
【示例2】如果想删除蓝盒子,但是又无法确定它的父元素,此时可以使用parentNode属性来快速获取父元素的引用,并借助这个引用来实现删除操作。
var ok = document. getElementByld ("ok") ; //获取按钮兀素的引用
ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数
var blue = document.getElementByld("blue"); //获取蓝盒子的引用
var parent = blue .parentNode; //获取蓝盒子父元素的引用
parent. removeChild (blue); //移出蓝盒子
}
如果希望把删除节点插入到文档其他位置,可以使用removeChild()方法,也可以使用appendChild() 和insertBefore()方法实现。
点击加载更多评论>>