document物件 動態的建立元素(節點)/新增元素(節點)/刪除元素(節點)
主要是通過建立節點的方式來完成動態建立和動態刪除的，其具體的方法就2個document.createElement("a");document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"))
在此之前先對dom結點的知識進行加強介紹
1，
常用的dom的每個Node節點屬性和方法(加強篇)
特別提示：
html dom和xml dom都遵循相同dom規範的，所以他們有很多相同的方法和屬性，因此我們也可以去檢視xml dom的node節點提供的方法和屬性。
在dom程式設計中，一個html
下面是node節點的屬性和方法，注意createElement是document的方法，不是node節點的方法
|
屬性名稱 |
型別 |
說明 |
|
nodeName |
String |
節點名稱 |
|
nodeValue |
String |
節點值 |
|
nodeType |
Number |
節點型別 |
|
parentNode |
Node |
父節點 |
|
firstChild |
Node |
第一個子節點 |
|
lastChild |
Node |
最後一個子節點 |
|
childNodes |
NodeList |
所有子節點 |
|
previousSibling |
Node |
前一個節點 |
|
nextSibling |
Node |
後一個節點 |
|
ownerDocument |
Document |
獲得該節點所屬的文件物件 |
|
attributes |
Map |
代表一個節點的屬性物件 |
|
方法名稱 |
返回值 |
說明 |
|
hasChildNodes() |
Boolean |
當前節點是否有子節點 |
|
appendChild(node) |
Node |
往當前節點上新增子節點 |
|
removeChild(node) |
Node |
刪除子節點 |
|
replaceChild(oldNode,newNode) |
Node |
替換子節點 |
|
insertBefore(newNode,refNode) |
Node |
在指定節點的前面插入新節點 |
node屬性方法的使用 [前、後節點功能在IE8以上瀏覽器未通過測試]
[dom5-document.html]node屬性和方法的使用示例
<html>
<head>
<title>document示例Node節點--烏龜抓雞</title>
<script language="javascript" type="text/javascript">
<!--
function test(){
var wuguiDiv=$('wugui');
alert(wuguiDiv.nodeName+" "+wuguiDiv.nodeType+" "+wuguiDiv.nodeValue);
alert(wuguiDiv.childNodes.length+" "+wuguiDiv.nextSibling.nodeValue+" "+wuguiDiv.previousSibling.nodeValue+" "+wuguiDiv.parentNode);
}
function $(id){
return document.getElementById(id);
}
//-->
</script>
</head>
<body onkeydown="return move(event)">
<input type="button" value="Node測試" onclick="test()" /><br>
<table border="1px">
<tr>
<td></td>
<td><input type="button" value="向上走" onclick="move(this)" /></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="向左走" onclick="move(this)" /></td>
<td></td>
<td><input type="button" value="向右走" onclick="move(this)" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="向下走" onclick="move(this)" /></td>
<td></td>
</tr>
</table>
<!--把烏龜放在div中-->
<div id="wugui" style="position:absolute;left:100px;top:120px;">
<img src="1.jpg" border="1px" alt="" />
</div>
<!--雞放在div中-->
<div id="cock" style="position:absolute;left:200px;top:200px;">
<img src="2.jpg" border="1px" alt="" />
</div>
</body>
</html>2，動態建立dom物件createElement()、parentNode.removeChild()
<html>
<head>
<title>document示例</title>
<script language="javascript" type="text/javascript">
<!--
function test1(){
//建立元素
var myElement=document.createElement("a");//createElement(??)??寫希望建立的html元素的標籤名
//給新元素新增必要的資訊
myElement.id="id1";
myElement.href="http://www.sina.com.cn";
myElement.innerText="連線到sina";
//給新元素指定位置
myElement.style.left="400px";
myElement.style.top="300px";
myElement.style.position="absolute";
//新增到document.body上
document.body.appendChild(myElement);
}
function test2(){
var myButton=document.createElement("input");
myButton.type="button";
myButton.value="這是動態建立的按鈕";
document.getElementById("div1").appendChild(myButton);
}
function test3(){
//刪除一個元素(刪除一個元素前提：必需獲得父元素)
//這是第一種刪除方法(不靈活)
document.body.removeChild(document.getElementById("id1"));
//第二種方法(推薦此方法)
//document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"));
}//-->
</script>
</head>
<body>
<input type="button" onclick="test1()" value="動態建立超連結" />
<input type="button" onclick="test2()" value="動態建立按鈕" />
<input type="button" onclick="test3()" value="刪除超連結" />
<div id="div1" style="width:200px;height:400px;border:1px solid red;">div1</div>
</body>
</html>