Javascript基础——利用Dom元素对节点进行创建、插入和删除、文档碎片

1、创建节点——createElement

（例如在ul元素后创建li元素）

var oUl=docuemnt.getElementById('ul1');

var oLi=oUl.createElement('li');

2、插入节点(两种方式)

第一种——appendChild

前提是在按钮点击创建基础上，进行相对应节点的插入。

var oBtn=document.getElementById('btn1');

var oUl=docuemnt.getElementById('ul1');

var oTxt=docuemnt.getElementById('txt1');

oBtn.onclick=function(){

var oLi=oUl.createElement('li');

//在ul后边插入节点li；

oUl.appendChild(oli);

}

第二种——insertBefore()

例如添加元素使其永远在插入的第一个节点位置上，

做法：通过判断ul下的子节点长度，若为0，即在其后边直接添加；否则在其对应节点的前边添加，永远为第一个。

var oBtn=document.getElementById('btn1');

var oUl=docuemnt.getElementById('ul1');

var oTxt=docuemnt.getElementById('txt1');

oBtn.onclick=function(){

var oLi=oUl.createElement('li');

var aLI=document.getElementsByTagName('li');

oLi.innerHTML=oTxt.value;
//li值即为text输入框中的值；

//在ul后边插入节点li；

if(aLl.length>0){

oUl.insertBefore(oLi,aLi[0]);

}

else{

oUl.appendChild(oLi);

}

}；

3、删除节点

var aA=docuemnt.getElementsByTagName('a');

var oUl=document.getElementById('ul1');

for(var i=0;i<aA.length;i++){

aA[i].onclick=function(){

oUl.removeChild(this.parentNode);    //删除ul下的父级元素，即li；

}

}

<ul id="ul1">

<li>asd<a href="javascript:;">删除</a></li>

<li>jhklh<a href="javascript:;">删除</a></li>

</ul>

4、文档碎片

知识点：文档碎片(仅在低级的浏览器会提高性能，在高级浏览器会降低性能，现在不怎么使用)
1、理论上文档碎片可以提高DOM操作性能；
2、文档碎片原理：document.createDocumentFragment();

window.onload=function(){
var oUl=document.getElementById('ul1');
//创建一个文档碎片；
var oFrag=document.createDocumentFragment();

for(var i=0;i<1000;i++){
var oLi=document.getElementsByTagName('li');
//把节点添加到文档碎片中；
oFrag.appendChild(oLi);
}

oUl.appendChild(oFrag);
};