Element: replaceChildren() Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die Element.replaceChildren()
Methode ersetzt die vorhandenen Kinder eines Node
mit einem angegebenen neuen Satz von Kindern. Diese können Zeichenfolgen oder Node
Objekte sein.
Syntax
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* …, */ paramN)
Parameter
Rückgabewert
Keiner (undefined
).
Ausnahmen
HierarchyRequestError
DOMException
-
Wird ausgelöst, wenn die Einschränkungen des Knotendiagramms verletzt werden.
Beispiele
Einen Knoten leeren
replaceChildren()
bietet einen sehr bequemen Mechanismus, um einen Knoten von all seinen Kindern zu leeren. Sie rufen es auf dem übergeordneten Knoten ohne Angabe eines Arguments auf:
myNode.replaceChildren();
Knoten zwischen Elementen übertragen
replaceChildren()
ermöglicht es Ihnen, Knoten mühelos zwischen Elementen zu übertragen, ohne auf umständlichen Schleifencode zurückgreifen zu müssen. Angenommen, wir haben eine einfache Anwendung, die Ihnen erlaubt, auszuwählen, welches Essen Sie für Ihre Party möchten. Dieses HTML könnte ungefähr so aussehen:
<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>
Es wäre sinnvoll, ein einfaches CSS zu verwenden, um die beiden Auswahllisten nebeneinander anzuordnen, mit den Steuerungstasten dazwischen:
main {
display: flex;
}
div {
margin-right: 20px;
}
label,
button {
display: block;
}
.buttons {
display: flex;
flex-flow: column;
justify-content: center;
}
select {
width: 200px;
}
Was wir tun möchten, ist, alle ausgewählten Optionen in der "nein" Liste in die "ja" Liste zu übertragen, wenn die "ja" Taste gedrückt wird, und alle ausgewählten Optionen in der "ja" Liste in die "nein" Liste zu übertragen, wenn die "nein" Taste gedrückt wird.
Um dies zu tun, geben wir jeder der Schaltflächen einen Klick-Ereignishandler, der die ausgewählten Optionen, die Sie übertragen möchten, in einer Konstante zusammenfasst, und die vorhandenen Optionen in der Liste, zu der Sie übertragen, in einer anderen Konstante. Dann wird replaceChildren()
auf der Liste aufgerufen, zu der Sie die Optionen übertragen möchten, und der Spread-Operator wird verwendet, um alle in beiden Konstanten enthaltenen Optionen zu übergeben.
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);
});
Das Endergebnis sieht so aus:
Spezifikationen
Specification |
---|
DOM Standard # ref-for-dom-parentnode-replacechildren① |
Browser-Kompatibilität
BCD tables only load in the browser