javascript将DOM节点添加到文档的方法实例分析

2023年6月10日下午12:41 • JavaScript

JavaScript 是一种用于交互式网页的编程语言，可以通过它对网页进行动态操作。在网页中，我们需要通过将 DOM 节点添加到文档中来动态地改变页面内容和样式。本文将详细讲解将 DOM 节点添加到文档中的方法。

什么是 DOM 节点

DOM 是 Document Object Model（文档对象模型）的缩写，它是一种将文档表示为树形结构的方法。

在 DOM 中，文档被表示为一个文档对象（document），文档中的所有元素及其属性都被表示为对象（node）。包含在元素中的文本也是一个节点。

节点分为以下几种类型：

元素节点
属性节点
文本节点
注释节点

appendChild 方法

appendChild() 是 JavaScript 中的一个内置方法，它可以将一个新的节点加入到指定节点的子节点列表的末尾。接下来，我们将通过两个示例来说明如何使用这个方法。

首先是创建一个空的 div 元素，并将其添加到文档中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>appendChile Example</title>
  </head>
  <body>
    <script>
      // 获取 body 元素
      var body = document.querySelector('body');

      // 创建一个空的 div 元素
      var div = document.createElement('div');

      // 将 div 元素添加到 body 元素中
      body.appendChild(div);
    </script>
  </body>
</html>

在这个示例中，我们通过 document.createElement() 方法创建了一个空的 div 元素，并使用了 appendChild() 方法将其添加到了文档的 body 元素中。

接下来，我们将通过以下示例说明如何将新的节点插入到已有的节点列表中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>appendChile Example</title>
  </head>
  <body>
    <ul>
      <li>第一项</li>
      <li>第二项</li>
      <li id="add-me">第三项</li>
      <li>第四项</li>
    </ul>
    <script>
      // 获取 li 元素列表
      var lis = document.querySelectorAll('li');

      // 创建一个新的 li 元素
      var new_li = document.createElement('li');
      new_li.innerHTML = '新的列表项';

      // 将新的 li 元素插入到已有的列表项中
      lis[2].parentNode.insertBefore(new_li, lis[3]);
    </script>
  </body>
</html>

在这个示例中，我们通过 querySelectorAll() 方法获取了文档中的所有 li 元素。然后，我们使用 createElement() 方法创建了一个新的 li 元素，并使用 insertBefore() 方法将其插入到了已有的 li 元素中。