本文实例讲述了JS实现的DOM插入节点操作。分享给大家供大家参考，具体如下：
一 介绍
插入节点通过使用insertBefore()方法来实现。
insertBefore()方法将在另一个子节点前插入新的子节点。
obj.insertBefore(new,ref)
new：表示新的子节点。
ref：指定一个节点，在这个节点前插入新的节点。
二 应用
插入节点，本示例在页面的文本框中输入需要插入的文本，然后通过单击“前插入”按钮将文本插入到页面中。
三 完整示例代码：
<!DOCTYPE html>
<html>
<head>
<title>www.jb51.net 插入节点</title>
JavaScript DOM（Document Object Model）是用于操作HTML和XML文档的标准接口，它允许程序员或脚本动态更新、添加和删除文档的元素。在这个示例中，我们重点探讨如何使用`insertBefore()`方法来插入新的节点。
一、`insertBefore()`方法详解
`insertBefore()`方法是JavaScript DOM中的一个重要函数，它允许我们在已有子节点的前面插入一个新的子节点。方法的基本语法如下：
```javascript
node.insertBefore(newNode, refNode);
```
- `newNode`：表示要插入的新的子节点，可以是创建的新元素节点，也可以是已存在于文档中的其他节点。
- `refNode`：作为参照的节点，即新节点将在该节点之前被插入。如果`refNode`为null，则`newNode`将被添加到父节点的末尾。
二、应用示例
在提供的示例中，用户可以通过文本框输入文本，点击“前插入”按钮，将文本内容以`<p>`标签的形式插入到页面中`id`为"h"的`<h2>`元素之前。以下是对示例代码的详细解析：
```html
<!DOCTYPE html>
<html>
<head>
<title>www.jb51.net 插入节点</title>
<script>
function crNode(str) {
var newP = document.createElement("p"); // 创建新<p>元素
var newTxt = document.createTextNode(str); // 创建包含文本的新文本节点
newP.appendChild(newTxt); // 将文本节点添加到<p>元素中
return newP;
}
function insetNode(nodeId, str) {
var node = document.getElementById(nodeId); // 获取目标节点
var newNode = crNode(str); // 创建新的<p>元素
if (node.parentNode) { // 检查目标节点是否有父节点
node.parentNode.insertBefore(newNode, node); // 在目标节点前插入新节点
}
}
</script>
</head>
<body>
<h2 id="h">在上面插入节点</h2>
<form id="frm" name="frm">
输入文本：<input type="text" name="txt" />
<input type="button" value="前插入" onclick="insetNode('h', document.frm.txt.value);" />
</form>
</body>
</html>
```
1. `crNode(str)`函数创建了一个新的`<p>`元素，并设置其文本内容为传入的`str`参数。
2. `insetNode(nodeId, str)`函数首先通过`getElementById`获取指定ID的节点，然后调用`crNode(str)`生成新节点，并使用`insertBefore`方法将其插入到目标节点之前。
3. 当用户点击“前插入”按钮时，输入框中的文本值会传递给`insetNode`函数，从而实现动态插入文本内容。
三、运行结果
运行这段代码后，用户可以在文本框中输入任意文本，点击“前插入”按钮，所输入的文本就会被添加到页面中`id`为"h"的`<h2>`元素之前，形成一个新的段落。
四、相关知识点
1. **DOM操作**：JavaScript可以使用DOM API操作HTML元素，包括创建、查找、修改和删除元素。
2. **元素创建**：`createElement`方法用于创建新的HTML元素。
3. **文本节点创建**：`createTextNode`方法用于创建包含文本的文本节点。
4. **节点插入**：`appendChild`和`insertBefore`方法分别用于在现有子节点之后和指定节点之前插入新节点。
5. **事件处理**：通过`onclick`属性，我们可以为HTML元素绑定点击事件处理器。
6. **表单元素交互**：`document.frm.txt.value`用于获取表单元素的值。
了解这些基本的JavaScript DOM操作，可以让你更好地控制网页的动态内容和交互性。同时，结合其他DOM方法和属性，如`removeChild`、`replaceChild`等，可以实现更复杂的页面动态更新功能。
- 1
- 2
前往页