Element: replaceChildren() 方法
Element.replaceChildren() 方法使用指定的子节点集替换 Node 的现有子节点。这些子节点可以是字符串或 Node 对象。
语法
js
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* …, */ paramN)
参数
param1, …,paramN-
一组要替换
Element现有子节点的Node对象或字符串。如果未指定任何替换对象，则Element将清空所有子节点。
返回值
无（undefined）。
异常
HierarchyRequestErrorDOMException-
当违反 节点树的约束 时抛出。
示例
清空节点
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" --></button>
<button id="to-no"><-- 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① |
浏览器兼容性
加载中…