標籤：xhtml dtd 原理 系統 需要 length 子節點 aaaaa his
一、建立、插入和刪除元素
（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="建立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="建立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操作應用-建立、插入和刪除元素；文檔片段
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
