JavaScript DOM节点添加示例

2023年6月10日上午11:53 • JavaScript

当我们需要对网页中的元素进行动态的增删改时，JavaScript就是我们的好帮手之一。在JavaScript中，通过操作网页文档的对象模型（DOM）来实现对页面元素的增删改查。其中节点的添加，是常用的一种操作。

添加DOM节点的方法

在JavaScript中，有多种方式可以添加DOM节点，以下是其中的两种：

1. createElement()方法

createElement() 方法用于创建一个指定的 HTML 元素。例如，我们可以通过以下代码来创建一个新的段落元素，并设置其文本内容：

// 创建一个新的段落元素
var newPara = document.createElement("p");

// 设置段落元素的文本内容
var text = document.createTextNode("I'm a new paragraph!")
newPara.appendChild(text);

// 将新段落元素添加到当前文档中
document.body.appendChild(newPara);

2. innerHTML属性

innerHTML 属性可以用于替换或插入 HTML 元素的内容。例如，我们可以通过以下代码来创建一个新的段落元素，并使用 innerHTML 属性设置其文本内容：

// 在文档中添加一个新的段落元素，并设置其文本内容
document.body.innerHTML += "<p>I'm a new paragraph!</p>";

添加DOM节点的示例

以下是两个示例，展示如何使用上述的两种方法来添加 DOM 节点：

示例1：使用createElement() 方法添加DOM节点

以下代码展示如何使用 createElement() 方法来在网页的头部添加一个新的标题并设置文本内容：

<!DOCTYPE html>
<html>
  <head>
    <title>DOM节点添加示例</title>
  </head>
  <body>
    <p>这是一个网页</p>
  </body>
  <script>
    // 创建一个新的标题元素并设置文本内容
    var newHeader = document.createElement("h1");
    var text = document.createTextNode("这是一个新的标题")
    newHeader.appendChild(text);

    // 将新标题元素添加到文档头部
    document.head.appendChild(newHeader);
  </script>
</html>

在上述例子中，我们使用 createElement() 方法创建了一个新的 h1 标题元素，并设置其文本内容为 "这是一个新的标题"。接着，我们使用 appendChild() 方法将新的 h1 标题元素添加到文档头部。

示例2：使用innerHTML属性添加 DOM节点

以下代码展示如何使用 innerHTML 属性来在网页的末尾添加一个新的段落元素并设置其文本内容：

<!DOCTYPE html>
<html>
  <head>
    <title>DOM节点添加示例</title>
  </head>
  <body>
    <p>这是一个网页</p>
  </body>
  <script>
    // 在网页的末尾添加新的段落元素
    document.body.innerHTML += "<p>这是一个新的段落</p>";
  </script>
</html>

在上述例子中，我们直接使用 innerHTML 属性来替换整个 body 元素的内容，添加了一个新的段落元素并设置其文本内容为 "这是一个新的段落"。