JavaScript脚本可以为DOM动态增加节点，程序为DOM树增加节点时，页面会动态地增加HTML元素。当需要为页面增加HTML元素时，应按如下两个步骤操作。
- 创建或复制节点
- 添加节点
创建或复制节点
创建节点通常借助于document对象的createElement方法来实现，语法如下。
➢document.createElement(Tag): 创建Tag标签对应的节点。
下面的代码示范了如何创建一个节点。
<script>
var a = document.creatElement("div");
alert(a);
</script>创建一个节点的开销可能过大，实际上还可以复制一个已有的节点,复制已有节点的系统开销略小。通过调用Node的cloneNode()方法即可复制一个已有节点，该方法的语法格式如下。
➢Node cloneNode(boolean deep):复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点:当deep为false 时，表示仅复制当前节点。
<ul id = "d">
<li>原有的内容</li>
</ul>
<script>
var ul = document.getElementById("d");
var cj = ul.firstChild.nextSibling.cloneNode(false);
cj.innerHTML = "新加的内容";
ul.appendChild(cj);
</script>添加节点
当一个节点创建成功后，一定要将该节点添加到DOM树中才能显示出来。对于普通的节点，可采用Node对象的如下方法来添加节点。
为列表框、下拉菜单添加选项
下面的代码示范了通过这种方式来添加选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>为列表框添加选项</title>
</head>
<body id="test">
<script>
var a = document.createElement("select");
for(var i=0;i<10;i++){
var op =document.createElement("option");
op.innerHTML = '新增的选项'+i;
a.add(op,null);
}
a.size = 5;
document.getElementById("test").appendChild(a);
</script>
</body>
</html>上面的页面程序在早期的IE浏览器(如IE8及以前版本)中将出现错误，主要是因为它不允许调用add(方法时指定最后-一个参数为null。为了避免这种情况，可使用直接为指定选项赋值的方法来添加选项。
为指定选项赋值所支持的值必须是一个有效的选项，创建选项除了可使用前面所示的createElement()方法之外，还可使用如下构造器。
new Option(text,value,defaultSelected,selected)
下面的代码示范了利用第二种方法来为列表框、下拉菜单添加选项。
<body id="test">
<script>
var a = document.createElement("select");
a.style.width="2000px";
for(var i=0;i<10;i++){
var op =new Option('新增的'+i,i);
a.options[i]=op;
}
a.size = 5;
document.getElementById("test").appendChild(a);
</script>
</body>动态添加表格内容
表格元素、表格行则另有添加子元素的方法。实际上，它们可以在添加子元素的同时创建这些子元素。也就是说，添加表格子元素时，往往无须使用document 的createElement()方法来创建节点。
下面通过脚本在页面中动态生成-一个表格。
<body id="test">
<script>
var a = document.createElement("table");
a.style.width = "800px";
a.style.borderCollapse = "collapse";
a.border = 1;
var caption = a.createCaption();
caption.innerHTML = "表格标题";
for (var i=0;i<5;i++){
var tr = a.insertRow(i);
for(var j=0;j<7;j++){
var td = tr.insertCell(j);
td.style.padding = "5px";
td.innerHTML = "单元格内容"+i+j;
}
}
document.getElementById("test").appendChild(a);
</script>
</body>效果为
