📌  相关文章
📜  HTML | DOM ParentNode.prepend() 方法(1)

📅  最后修改于: 2023-12-03 14:41:48.537000             🧑  作者: Mango

HTML | DOM ParentNode.prepend() 方法

简介

prepend() 方法是 DOM 的 ParentNode 接口中的一个方法，可用于在选定元素的开头添加一个或多个子节点。该方法在执行操作之前会将子节点进行深复制，然后将复制后的节点插入到父节点的开头。

语法
parentNode.prepend(node1, node2, ..., nodeX)
参数

prepend() 方法接受一个或多个参数，参数可以是元素节点、文本节点或者文档片段。

  • node1, node2, ..., nodeX: 要添加到父节点开头的一个或多个节点。
示例

以下示例演示了如何使用 prepend() 方法在 HTML 文档中添加子节点。

<!DOCTYPE html>
<html>
<head>
  <title>prepend() 示例</title>
</head>
<body>
  <div id="parent">
    <p>这是原始内容。</p>
  </div>

  <script>
    // 为父节点添加两个新的子节点
    const parent = document.getElementById('parent');
    const child1 = document.createElement('h1');
    child1.textContent = '标题1';
    const child2 = document.createElement('h2');
    child2.textContent = '标题2';

    parent.prepend(child1, child2);
  </script>
</body>
</html>

在上述示例中，我们先找到 id 为 "parent" 的 div 元素，然后使用 createElement() 方法创建了两个新的子节点 h1 和 h2，并给它们分别设置了内容。最后，我们使用 prepend() 方法将这两个子节点添加到 div 的开头。

注意事项
  • 使用 prepend() 方法会在目标元素的开头添加新的子节点，如果该元素已经有了子节点，新的子节点将会插入到已有子节点的前面。
  • 当插入的节点是已经存在于 DOM 树中的节点时，节点会自动从当前位置移除并插入到新的位置。
  • prepend() 方法在大多数现代浏览器中都被支持，包括 Chrome、Firefox、Safari、Edge 等。
参考链接