DOM对HTML元素的增删改操作

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>

<title>对表格元素进行增删改操作</title>

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>

</html>

秒客网