DOM创建节点的方法：
document.createElement(Tag)，Tag必须是合法的HTML元素
DOM复制节点的方法：
节点cloneNode(boolean deep)，当deep为true时，表示复制当前节点以及当前结点的全部后代节点。为false时，只复制当前节点。
DOM添加、删除节点的方法：
|
appendChild(newNode) |
将newNode添加成当前节点的最后一个子节点 |
|
insertBefore(newNode,refNode) |
将refNode节点之前插入newNode节点 |
|
replaceChild(newNode,oldNode) |
将oldNode节点替换成newNode节点 |
|
removeChild(oldNode) |
将oldNode子节点删除 |
DOM为下拉菜单（select）添加选项的方式：
- 创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来（IE、谷歌都支持）。语法如下：
|
new Option(text,value,defaultSelected,selected) |
该构造器有4个参数，说明如下：
|
text |
该选项的文本、即该选项所呈现的“内容” |
|
value |
选中该选项的值 |
|
defaultSelected |
设置默认是否显示该选项 |
|
selected |
设置该选项当前是否被选中 |
添加创建好的选项至列表框或下拉菜单的方式
直接为<select>的的指定选项赋值
|
列表框或下拉菜单对象.options[i]=创建好的option对象 |
删除列表框、下拉菜单的选项的方法
- 直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
- 直接将指定选项赋值为null
|
列表框或下拉菜单对象.remove(index)或对象.options[index]=null |
DOM动态添加删除表格内容所使用到的常用方法：
|
insertRow(index) |
在指定索引位置插入一行 |
|
createCaption() |
为该表格创建标题 |
|
deleteRow(index) |
删除表格中index索引处的行 |
|
deleteCaption() |
删除表格标题 |
给表格行创建、删除单元格的方法：
|
insertCell(index) |
在index处创建一个单元格，返回新创建的单元格 |
|
deleteCell(index) |
删除某行在index索引处的单元格 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对表格元素进行增删改操作</title>
<script type="text/javascript">
function createTable(){
var b=document.getElementById("test");
var t=document.createElement("table");
t.border="1";
t.id="mytable";
var caption=t.createCaption();
caption.innerHTML="我的表格";
for(var i=0;i<5;i++){
var tr=t.insertRow(i);
for(var j=0;j<4;j++){
var td=tr.insertCell(j);
}
b.appendChild(t);td.innerHTML="单元格"+i+j;
}
}
function deleteLastRow(){
var t=document.getElementById("mytable");
if(t.rows.length>0){
t.deleteRow(t.rows.length-1);
}
}
function deleteLastCell(){
var t=document.getElementById("mytable");
var lastRow=t.rows[t.rows.length-1];
if(lastRow.cells.length>0){
lastRow.deleteCell(lastRow.cells.length-1);
}
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个5行4列的表格" onClick="createTable()">
<input type="button" value="删除最后一行" onClick="deleteLastRow()">
<input type="button" value="删除最后一个单元格" onClick="deleteLastCell()">
</body>
</html>