钟文志的部落格

使用appendChild

appendChild 是一个用于向父元素的子元素列表末尾添加新的子节点的方法。这在动态创建和添加新元素到页面中时非常有用。以下是一个简单的例子：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用appendChild示例</title>
</head>
<body>

  <div id="parentElement">
    <!-- 父元素 -->
  </div>

  <script>
    // 创建一个新的子元素
    var newElement = document.createElement("p");
    newElement.textContent = "这是新添加的段落。";

    // 获取父元素
    var parentElement = document.getElementById("parentElement");

    // 使用appendChild将新元素添加到父元素中
    parentElement.appendChild(newElement);
  </script>

</body>
</html>

在这个例子中，首先通过 document.createElement 创建一个新的 p 元素，并设置其文本内容。然后，通过 document.getElementById 获取到父元素，并使用 appendChild 方法将新创建的子元素添加到父元素的子节点列表的末尾。

这样，新的段落元素就被成功添加到了页面中。appendChild 还可以用于移动已存在的元素，将其从一个位置移动到另一个位置。

请注意，appendChild 操作是在 DOM 中实际进行的，因此它会影响页面的结构。在使用时要小心，确保不会破坏页面的其他部分。

使用insertBefore

insertBefore 是另一个常用于在 DOM 中插入新元素的方法。与 appendChild 不同，insertBefore 允许您在父元素的子节点列表中的指定位置插入新的子节点。

以下是一个使用 insertBefore 的简单示例：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用insertBefore示例</title>
</head>
<body>

  <div id="parentElement">
    <!-- 父元素 -->
    <p>已存在的段落1</p>
    <p>已存在的段落2</p>
  </div>

  <script>
    // 创建一个新的子元素
    var newElement = document.createElement("p");
    newElement.textContent = "这是新添加的段落。";

    // 获取父元素
    var parentElement = document.getElementById("parentElement");

    // 获取要插入的参考节点（在该节点之前插入新元素）
    var referenceNode = parentElement.childNodes[1];

    // 使用insertBefore将新元素插入到参考节点之前
    parentElement.insertBefore(newElement, referenceNode);
  </script>

</body>
</html>

在这个例子中，首先通过 document.createElement 创建一个新的 p 元素，并设置其文本内容。然后，通过 document.getElementById 获取到父元素。

使用 childNodes 或其他方法获取到要作为参考节点的已存在节点，然后使用 insertBefore 方法将新创建的子元素插入到参考节点之前。

与 appendChild 类似，insertBefore 也是在 DOM 中实际进行的操作，因此要小心确保不会破坏页面的其他部分。

使用appendChild ​

使用insertBefore ​

使用appendChild

使用insertBefore