JavaScript: The replaceChildren()

Good day. 🎩

In JavaScript, when we want to empty or replace the content of a container element, we usually 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);

newNode and otherNewNode are variables. Didn't I just type that?

That container.replaceChildren(newNode, otherNewNode); above is equivalent with:

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

Because we can't 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. Sometimes we can just use string, sometimes we can only create DOM node first because of the elaborate element we need to show or just a confusing flow we made.

Look at me, I'm an architect, for confusing myself. Go independent confusion.

---

Replace Children

It sounds like the changeling committee SOP.

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

---

Until next time. 🎩