JavaScript之DOM节点操作

a.appendChild(b)  追加标签 a是b的父级，将b追加到a中

追加标签  a.insertBefore(b,c);  a是b和c的父级，在c前面插入b

删除标签  a.removeClild(b)  a是b的父级，删除b标签

案例：

（1）html

<input type="text" id="txt">
<button id="btn">按钮</button>
<div id="box">
<p id="P1">这是第一个P <span id='close'>X</span></p>
</div>

（2）JavaScript

function abb(a){
return document.getElementById(a);
}
var p;
abb('btn').onclick=function(){
p=document.createElement('p');
p.innerHTML=abb('txt').value;
console.log(p);
// abb('box').appendChild(p);
abb('box').insertBefore(p,abb('box').children[0]);
// 追加标签 a.insertBefore(b,c); a是b和c的父级，在c前面插入b

}
abb('close').onclick=function(){
// abb('box').removeChild(this.parentNode);
this.parentNode.parentNode.removeChild(this.parentNode);
// 删除标签 a.removeClild(b) a是b的父级，删除b标签
}