首页 > 代码库 > 【JS学习笔记】DOM操作应用-创建、插入和删除元素；文档碎片
【JS学习笔记】DOM操作应用-创建、插入和删除元素；文档碎片
一、创建、插入和删除元素
（1）创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子：为ul插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function ()
{
var oBtn=document.getElementById(‘btn1‘);
var oUl=document.getElementById(‘ul1‘);
var oTxt=document.getElementById(‘txt1‘);
oBtn.onclick = function()
{
var oLi=document.createElement(‘li‘);/*创建好的li，系统并不知道要放在什么位置，需要我们自己设置*/
oLi.innerHTML=oTxt.value;
//父级,.appendChild(子节点);
oUl.appendChild(oLi);/*oLi作为一个子节点添加给oUl*/
};
};
</script>
</head>
<body>
<input id="txt1" ytpe="text" />
<input id="btn1" type="button" value="http://www.mamicode.com/创建li" />
<ul id="ul1">
</ul>
</body>
</html>
（2）插入元素
insertBefore(节点，原有节点) 在已有元素钱插入
例子：倒序插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function ()
{
var oBtn=document.getElementById(‘btn1‘);
var oUl=document.getElementById(‘ul1‘);
var oTxt=document.getElementById(‘txt1‘);
oBtn.onclick = function()
{
var oLi=document.createElement(‘li‘);/*创建好的li，系统并不知道要放在什么位置，需要我们自己设置*/
var aLi=oUl.getElementsByTagName(‘li‘);
oLi.innerHTML=oTxt.value;
//父级,.appendChild(子节点);
//oUl.appendChild(oLi);/*oLi作为一个子节点添加给oUl*/
//这段代码用来兼容IE
if(aLi.length>0)
{
oUl.insertBefore(oLi,aLi[0]);/*每次往第0个li之前插入*/
}
else
{
oUl.appendChild(oLi);/*如果之前没有li,则直接使用appendChild追加一个节点*/
}
};
};
</script>
</head>
<body>
<input id="txt1" ytpe="text" />
<input id="btn1" type="button" value="http://www.mamicode.com/创建li" />
<ul id="ul1">
</ul>
</body>
</html>
（3）删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>删除元素</title>
</head>
<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 ()
{
oUl.removeChild(this.parentNode);
};
}
};
</script>
<body>
<ul id="ul1">
<li>aaaaa<a href="javascript:;">删除</a></li>
<li>bbbbbb<a href="javascript:;">删除</a></li>
<li>cccccc<a href="javascript:;">删除</a></li>
<li>dddddd<a href="javascript:;">删除</a></li>
</ul>
</body>
</html>
二、文档碎片
（1）文档碎片可以提高DOM的操作性能（理论上），但是只在低级的浏览器里面有用，如果在高级浏览器中，用这种方法可能会导致性能不但没有提高反而降低了。
比如要插入一万个li标签，如果没有文档碎片，就必须插入一个然后页面渲染一次，插入完全部就要渲染一万次，太损耗性能。利用文档碎片，可以先把需要修改的全部放入文档碎片中，再一次渲染。
（2）文档碎片原理
（3）document.createDocumentFragment()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文档碎片2</title>
<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);/*直接把文档碎片一次性装进oUl中*/
};
</script>
</head>
<body>
<ul id="ul1">
</ul>
</body>
</html>
【JS学习笔记】DOM操作应用-创建、插入和删除元素；文档碎片