1、removeChild() 用来删除父节点的一个子节点。
parent.removeChild(childNode);
如下:
<div id="box">
<p id="p1">这是一个段落</p>
<p id="p2">第二个段落</p>
</div>
<script>
var box=document.getElementById("box"); //找到父元素
var p1=document.getElementById("p1"); //找到子元素
box.removeChild(p1);
//也可以通过要删除的子节点的父节点删除子节点
p1.parentNode.removeChild(p1);
</script>
2、replaceChild() 用新节点替换某个子节点。
parent.replaceChild (newnode,oldnode ) ;
如下:
<div id="box">
<p id="p1">这是一个段落</p>
<p id="p2">第二个段落</p>
<div id="div1">这是div</div>
</div>
<script>
var box=document.getElementById("box"); //找到父元素
var p1=document.getElementById("p1"); //找到要替换的元素
var p3=document.createElement('p');//创建要替换的元素
p3.innerHTML="这是第三个段落"; //为创建的元素赋值
box.replaceChild(p3,p1); //替换节点
p1.parentNode.replaceChild(p3,p1); //通过parentNode节点替换
</script>
注意:新节点可以是文档中某个已存在的节点,也可以创建新的节点。
3、cloneNode() 复制节点并返回复制的节点
node.cloneNode(true|false) ; //默认是 false。
参数设置为 true,克隆节点及其属性,以及后代;设置为 false,克隆节点本身
如下:
<div id="main">
<div id="box">
<p id="p1">这是一个段落</p>
<p id="p2">第二个段落</p>
</div>
</div>
<script>
var main=document.getElementById("main");
var box=document.getElementById("box");
var newNode=box.cloneNode(true);
main.appendChild(newNode);
console.log(main);
</script>
当参数为true时,结果如下:
当参数为false时,结果如下: