JavaScript: The replaceChildren()

Hello.

In JavaScript, when we want to empty or replace the content of a container element, we... presumably... do this:

// 1. Empty the container. container.innerHTML = ""; // 2. Replace the content. container.innerHTML = "the replacement";

Now, we have replaceChildren() — documentation on MDN.

It was added mid-2020, part of the DOM Living Standard, first implemented in browsers between mid and late 2020 (around the ECMAScript 2020 timeframe, though technically not an ES feature). ES = ECMAScript, not Espagnol.

---

Usage

// 1. Empty the container. container.replaceChildren(); // 2. Replace with a single node. container.replaceChildren(newNode); // 3. Replace with multiple nodes. container.replaceChildren(newNode, otherNewNode); // 4. You can even pass strings — they'll be converted to text nodes. container.replaceChildren("Humphry Davy approves this example!");

newNode and otherNewNode are variables.

For instance:

const newNode = document.createElement("p"); // ⬅️ Creates a [p] tag. newNode.innerHTML = "Howdy!"; const otherNewNode = document.createElement("p"); otherNewNode.innerHTML = "Yeehaw! 🤠"; const container = document.getElementById("my-container"); // Replace the content of the container with those two new nodes. container.replaceChildren(newNode, otherNewNode);

The container.replaceChildren(newNode, otherNewNode); is equivalent to:

container.innerHTML = ""; container.append(newNode, otherNewNode);

Because we cannot use innerHTML to append DOM nodes.

But we can do this:

container.innerHTML = "<p>Howdy!</p><p>Yeehaw! 🤠</p>";

So it depends on the things we build.

---

Replace Children

Anyway, it sounds like the changeling committee SOP.

Meeting minutes: Item 7 — Replace Children. Committee unanimously agrees to proceed with the changeling programme.

---

Cheers!