DOM操作应用
相洛华
创建、插入和删除元素
创建DOM元素
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function(){
//创建li
var oLi= document.createElement('li');
oLi.innerHTML=oTxt.value;
//父级.appendChild（子节点）；--添加到父级上
oUl.appendChild(oLi);
};
}
</script>
</head>
<body>
<input id="txt1" type="text">
<input id="btn1" type="button" value="创建li">
<ul id="ul1">
</ul>
</body>
插入元素
父级.insertBefore(子节点，在谁之前)
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function(){
//创建li
var oLi= document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
//父级.insertBefore(子节点，在谁之前)
//oUl.insertBefore(oLi,aLi[0]);
//解决IE不兼容问题
if(aLi.length>0){
oUl.insertBefore(oLi,aLi[0]);
}
else{
oUl.appendChild(oLi);
}
};
}
</script>
</head>
<body>
<input id="txt1" type="text">
<input id="btn1" type="button" value="创建li">
<ul id="ul1">
</ul>
删除元素
父级.removeChild(子节点) //从父级中删除
<script>
window.onload=function(){
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
for (var i=0;i<aA.length;i++){
aA[i].onclick=function(){
//父级.removeChild(子节点) 从父级中删除
oUl.removeChild(this.parentNode);
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>nakkjnaj <a href="javascript:;">删除</a></li>
<li>dhbsr <a href="javascript:;">删除</a></li>
<li>64165165 <a href="javascript:;">删除</a></li>
<li>4g1s65g1 <a href="javascript:;">删除</a></li>
</ul>
</body>
文档碎片
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment(); //对于低版本浏览器适用
for(var i=0;i<10000;i++){
var oLi=document.createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
}
</script>
</head>
<body>
<ul id="ul1">
</ul>
</body>
类似资料：