revision:
The Document.replaceChildren() method replaces the existing children of a Document with a specified new set of children..
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* … ,*/ paramN)
Parameters:
param1, ..., paramN : a set of Node or string objects to replace the Document's existing children with. If no replacement objects are specified, then the Document is emptied of all child nodes.
document.replaceChildren();
document.children; // HTMLCollection []
The Element.replaceChildren() method replaces the existing children of a Node with a specified new set of children. These can be string or Node objects.
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* … ,*/ paramN)
Parameters:
param1, …, paramN : a set of Node or string objects to replace the Element's existing children with. If no replacement objects are specified, then the Element is emptied of all child nodes.
myNode.replaceChildren();
<div>
<h4>Party food option list</h4>
<main>
<div class="rep" id="replace-1">
<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="rep buttons" id="replace-2">
<button id="to-yes">Transfer to "Yes" --></button>
<button id="to-no"><-- Transfer to "No"</button>
</div>
<div class="rep" id="replace-3">
<label for="yes">Yes please!</label>
<select id="yes" multiple size="10"></select>
</div>
</main>
</div>
<style>
main {display: flex;}
div .rep{ margin-right: 1vw;}
label, button {display: block;}
.buttons { display: flex; flex-flow: column;justify-content: center; }
select {width: 13vw; }
</style>
<script>
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);
});
</script>