元素：replaceChildren() 方法

Element.replaceChildren() 方法使用指定的新子节点集替换 Node 的现有子节点。这些可以是字符串或 Node 对象。

语法

js
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* …, */ paramN)

参数

param1，…，paramN

一组 Node 对象或字符串，用于替换 Element 的现有子节点。如果未指定替换对象，则 Element 将清空所有子节点。

返回值

无（undefined）。

异常

HierarchyRequestError DOMException

当违反 节点树的约束 时抛出。

示例

清空节点

replaceChildren() 提供了一种非常方便的机制来清空节点的所有子节点。您可以在父节点上调用它，而不指定任何参数

js
myNode.replaceChildren();

在元素之间传输节点

replaceChildren() 使您能够轻松地在元素之间传输节点，而无需诉诸冗长的循环代码。例如，假设我们有一个简单的应用程序，允许您为您的派对选择您想要的食物。此 HTML 可能如下所示

html
<h2>Party food option list</h2>

<main>
  <div>
    <label for="no">No thanks!</label>

    <select id="no" multiple size="10">
      <option>Apples</option>
      <option>Oranges</option>
      <option>Grapes</option>
      <option>Bananas</option>
      <option>Kiwi fruits</option>
      <option>Chocolate cookies</option>
      <option>Peanut cookies</option>
      <option>Chocolate bars</option>
      <option>Ham Sandwiches</option>
      <option>Cheese Sandwiches</option>
      <option>Falafel sandwiches</option>
      <option>Ice cream</option>
      <option>Jelly</option>
      <option>Carrot sticks and hummus</option>
      <option>Margherita pizza</option>
      <option>Pepperoni pizza</option>
      <option>Vegan veggie pizza</option>
    </select>
  </div>

  <div class="buttons">
    <button id="to-yes">Transfer to "Yes" --&gt;</button>
    <button id="to-no">&lt;-- Transfer to "No"</button>
  </div>

  <div>
    <label for="yes">Yes please!</label>

    <select id="yes" multiple size="10"></select>
  </div>
</main>

将两个选择列表并排放置在一行中，并在它们之间放置控制按钮，使用一些简单的 CSS 来实现这一点是很有意义的。

css
main {
  display: flex;
}

div {
  margin-right: 20px;
}

label,
button {
  display: block;
}

.buttons {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

select {
  width: 200px;
}

我们想要做的是，当按下“是”按钮时，将“否”列表中任何选中的选项转移到“是”列表中；当按下“否”按钮时，将“是”列表中任何选中的选项转移到“否”列表中。

为此，我们为每个按钮提供一个点击事件处理程序，该处理程序将要转移的选中选项收集到一个常量中，并将要转移到的列表中的现有选项收集到另一个常量中。然后，它使用 replaceChildren() 调用要转移到的列表，并使用扩展运算符传递两个常量中包含的所有选项。

js
const noSelect = document.getElementById("no");
const yesSelect = document.getElementById("yes");
const noBtn = document.getElementById("to-no");
const yesBtn = document.getElementById("to-yes");

yesBtn.addEventListener("click", () => {
  const selectedTransferOptions =
    document.querySelectorAll("#no option:checked");
  const existingYesOptions = document.querySelectorAll("#yes option");
  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
});

noBtn.addEventListener("click", () => {
  const selectedTransferOptions = document.querySelectorAll(
    "#yes option:checked",
  );
  const existingNoOptions = document.querySelectorAll("#no option");
  noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
});

最终结果如下所示

规范

规范
DOM 标准
# ref-for-dom-parentnode-replacechildren①

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅