javascript 创建插入和删除DOM元素

1、创建DOM元素

creatElement(标签名)　　创建一个节点

appendChild(标签名)　　追加一个节点

<input type="text" name="" id="txt1" />
<input type="button" value="创建li" id="btn1" />
<ul id="ul1">

</ul>
<script>
var oUl = document.getElementById("ul1");
var oBtn = document.getElementById("btn1");
var oTxt = document.getElementById("txt1");
oBtn.onclick = function ()
{
var oLi = document.createElement("li");
oLi.innerHTML = oTxt.value;
oUl.appendChild(oLi);　　//先appendChild再设置innerHTML也可以，但是这样做浏览器的渲染就是2次了，现在这样只渲染了一次
}
</script>

2、插入DOM元素

insertBefore(节点,原有节点)　　在已有元素前插入

<input type="text" name="" id="txt1" />
<input type="button" value="创建li" id="btn1" />
<ul id="ul1">

</ul>
<script>
var oUl = document.getElementById("ul1");
var oBtn = document.getElementById("btn1");
var oTxt = document.getElementById("txt1");
oBtn.onclick = function ()
{
var oLi = document.createElement("li");
var aLi = oUl.getElementsByTagName("li");
oLi.innerHTML = oTxt.value;
//oUl.insertBefore(oLi,aLi[0]); 这里直接插入会报错，因为aLi[0]不存在
if(aLi[0])
{
oUl.insertBefore(oLi,aLi[0]);
}
else
{
oUl.appendChild(oLi);
}
}
</script>

3、删除DOM元素

removeChild(节点)　　删除一个节点

<ul id="ul1">
<li>12378123 <a href="#">删除</a></li>
<li>adf <a href="#">删除</a></li>
<li>werwer <a href="#">删除</a></li>
<li>xcbc <a href="#">删除</a></li>
<li>123123 <a href="#">删除</a></li>
<li>zbfdb <a href="#">删除</a></li>
</ul>
<script>
var oUl = document.getElementById("ul1");
var aBtn = document.getElementsByTagName("a");
for(var i=0; i<aBtn.length; i++)
{
aBtn[i].onclick = function ()
{
oUl.removeChild(this.parentNode);
}
}
</script>

4、文档碎片

当创建大量的节点的时候，可以使用文档碎片。

文档碎片可以提高DOM操作性能（理论上）

document.createDocumentFragment();