主要是通过创建节点的方式来完成动态创建和动态删除的，其具体的方法就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文档会被当作dom树对待，dom会把所有的html元素映射成Node结点，于是你就可以使用node节点（对象）的属性和方法
下面是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>