14.5　　增加HTML元素

　　　　JavaScript脚本可以为DOM动态增加节点，程序为DOM树增加节点时，页面会动态地增加HTML元素。当需要为页面增加HTML元素时，

　　　　应按如下两个步骤操作。

　　　　　　（1）创建或复制节点。

　　　　　　（2）添加节点。

14.5.1　　创建或复制节点

　　　　创建节点通常借助于document对象的createElement方法来实现，语法如下。

　　　　　　var a = document.createElement("div");

　　　　调用document.createElement()方法时，传入的参数必须是一个合法的HTML标签。

　　　　复制节点通常通过调用Node的cloneNode()方法即可复制一个已有的节点，该方法的格式如下。

　　　　　　Node cloneNode(boolean deep)：复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部

　　　　　　　　　　　　　　　　　　　　　　后代节点；当deep为false时，表示仅复制当前节点。

　　　　代码示范：

　　　　　　//获取ID为d的节点

　　　　　　var ul = document.getElementById("d");

　　　　　　//复制ul的第二个子节点(不复制当前节点的后代节点)

　　　　　　var ajax = ul.firstChild.nextSibling.cloneNode(false);

　　　　　　//将复制的节点添加到页面中

　　　　　　ul.appendChild(ajax);

14.5.2　　添加节点

　　　　当一个节点创建成功后，一定要将该节点添加到DOM中才行。对于普通的几点，可采用Node对象的如下方法来添加节点。

　　　　　　appendChild(Node newNode)：将newNode添加成当前节点的最后一个子节点。

　　　　　　insertBefore(Node newNode,Node refNode)：在refNode节点之前插入newNode节点。

　　　　　　replaeChild(Node newChild,Node oldChild)：将oldChild节点替换成newChild节点。

14.5.3　　为列表框、下拉菜单添加选项

　　　　为列表框、下拉菜单添加子节点，也就是为列表框、下拉菜单添加选项。添加选项有两种方法：

　　　　　　调用HTMLSelectElement的add()方法添加选项。

　　　　　　直接为<select>的指定选项赋值。

　　　　HTMLSelectElement包含如下方法用于添加新选项。

　　　　　　add(HTMLOptionElement option,HTMlOptionElement before)：在before选项之前添加option选项。如果想将option选项添加在

　　　　　　最后，则将before指定为null即可；或者使用appendChild(option)添加亦可。

　　　　创建选项除了可使用createElement方法之外，还可使用如下构造器。

　　　　　　new Option(text,value,defaultSelected,selected)

　　　　该构造器有4个参数，这4个参数说明如下：

　　　　　　text：该选项的文本，即该选项所呈现的“内容”。

　　　　　　value：选中该选项的值。

　　　　　　defaultSelected：设置默认是否选中该选项。

　　　　　　selected：设置该选项当前是否被选中。

14.5.4　　动态添加表格内容

　　　　表格元素、表格行则另有添加子元素的方法。实际上，它们可以再添加子元素的同时创建这些子节点。也就是说，添加表格子元素时，

　　　　往往无须使用document的createElement()方法来创建节点。

　　　　HTMLTableElement对象有如下方法。

　　　　　　insertRow(index)：在index处插入一行。返回新创建的HTMLTableRowElement。

　　　　　　createCaption()：为该表格创建标题。返回新创建的HTMLTableCaptionElement。如果该表格已有标题，则返回已有的标题对象。

　　　　　　createTFoot()：为该表格创建<tffot>元素。返回新创建的HTMLTableFootElement。

　　　　　　createTHead()：为该表格创建<thead>元素。返回新创建的HTMLTableHeadElement。如果该表格已有<thead>元素，则返回已有的<thead>元素。

　　　　HTMLTableRowElement对象代表表格行，该对象包含如下方法用于插入单元格。

　　　　　　insertCell(long index)：在index处创建一个单元格，返回新创建的单元格。

14.6　　删除HTML元素

　　　　删除HTML元素也是通过删除节点来完成的。对于普通的HTML元素，可用通用方法来删除节点，而列表框、下来菜单、

　　　　表格则有额外的方法来删除HTML元素。

14.6.1　　删除节点

　　　　删除节点通常借助于其父节点，NOde对象提供了如下方法来删除子节点。

　　　　　　removeChild(oldNode)：删除oldNode子节点。

14.6.2　　删除列表框、下拉菜单的选项

　　　　删除列表框、下拉菜单的选项有两种方法：

　　　　　　利用HTMLSelectElement对象的remove()方法删除选项。

　　　　　　直接将指定选项赋为null即可。

　　　　对于HTMLSelectElement对象而言，它提供如了如下方法用于删除选项。

　　　　　　remove(long index)：删除指定索引处的选项。

14.6.3　　删除表格的行或单元格

　　　　删除表格的指定表格行使用HTMLTableElement对象的如下方法。

　　　　　　deleteRow(long index)：删除表格中index索引处的行。

　　　　删除表格行的指定单元格使用HTMLRowElement对象的如下方法。

　　　　　　deleteCell(long index)：删除某行index索引处的单元格。