首页 理论教育JavaScript入门:插入元素

JavaScript入门:插入元素

【摘要】:图14.4.6使用node.appendChild在末尾追加子节点2.insertBefore()使用node.insertBefore将子节点插入到指定子节点之前,语法如下:参数说明:◇ parentNode:表示父节点。图14.4.7使用node.insertBefore插入子节点提示使用appendChild()和insertBefore()方法添加子节点,如果newChildNode已经存在于DOM树形结构中,则newChildNode会先从原始位置移除。动手写14.4.8执行14.4.8.html,输出结果到网页,如下图所示。图14.4.8模拟实现insertAfter插入节点如果refChild节点有下一个兄弟节点,则在该兄弟节点前插入新节点,否则在最后追加新节点。

插入节点有两种方式:一是appendChild(),插入到子节点列表末尾;二是insertBefore(),插入到指定节点之前。

1.appendChild()

使用node.appendChild(newChildNode)将新的子节点添加到子节点列表末尾,语法如下:

参数说明:

◇ parentNode:表示父节点。

◇ newChildNode:必选参数,表示新的子节点。新的子节点会被添加到parentNode的子节点列表末尾。

动手写14.4.6

执行14.4.6.html,输出结果到网页,如下图所示。

图14.4.6 使用node.appendChild在末尾追加子节点

2.insertBefore()

使用node.insertBefore(newChildNode, referenceNode)将子节点插入到指定子节点之前,语法如下:

参数说明:

◇ parentNode:表示父节点。

◇ newChildNode:必选参数,表示新的子节点。(www.chuimin.cn)

◇ referenceNode:可选参数,表示参照节点。参照节点必须是parentNode的直接子节点,如果提供参照节点,则将newChildNode添加到该节点之前;如果没有参照节点,则将newChildNode添加到parentNode的子节点列表末尾。

动手写14.4.7

执行14.4.7.html,输出结果到网页,如下图所示。

图14.4.7 使用node.insertBefore插入子节点

提示

使用appendChild()和insertBefore()方法添加子节点,如果newChildNode已经存在于DOM树形结构中,则newChildNode会先从原始位置移除。

3.insertAfter()

DOM标准没有提供insertAfter()方法,但可以组合使用insertBefore()和nextSibling模拟实现。

动手写14.4.8

执行14.4.8.html,输出结果到网页,如下图所示。

图14.4.8 模拟实现insertAfter插入节点

如果refChild节点有下一个兄弟节点,则在该兄弟节点前插入新节点,否则在最后追加新节点。