Replacing all children of an HTMLElement?

Question

In my code, I fairly frequently need to replace all children of a certain HTML container with a new list of children.

What is the fastest way to do this? My current approach is collecting all new elements into a DocumentFragment. The only way I've found to then actually replace the children is to remove all the children one by one, and append the fragment. Is there no faster way?

Note: the solution needs not be cross-browser, but should preferably not require 3d-party components such as jQuery. The target-device is WebKit on a very slow CPU so I need to keep full control of any reflows.

Emmett

possible duplicate of Remove all child elements of a DOM node in JavaScript? – Wholewheat

Old question, but please note that instead of erasing the content and then adding new content, you can use the replaceChild function ( developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild ) like this: parentNode.replaceChild(newNode , nodeToBeReplaced); – Roley

Answer 1

If you simply want to replace all children, regarding of the type, why don't you just set its content to '' and then add your code:

container.innerHTML = '';
container.appendChild( newContainerElements );

that would basically remove all the children in the fastest possible way :)

Ringmaster

Found this solution myself later when concentrating on optimizing the remove-process. AFAIU the innerHTML-optimization isn't fully cross-browser-safe, and often not mentioned in "remove all children"-questions, but as stated I only care about WebKit and it seems to work for me. :) – Emmett

Using innerHTML = "";` doesn't appear to work in either Edge, or apparently IE. – Decanal

that is two actionable render view maybe ther is a falster way – Shall

Try container.textContent = '' instead of innerHTML – Locke

we can now use container.empty(); instead of container.innerHTML = '' – Fillet

@Fillet I can't find any documentation on that. Can you provide a link? – Austral

@Austral this was a while ago. i'm guessing i was referring to the empty() jQuery method, instead of a vanilla JS function. (whoops) also just tested..vanilla JS doesn't seem to have an empty() funciton – Fillet

𝙨𝙚𝙚 𝙘𝙤𝙧𝙧𝙚𝙘𝙩 2020+ 𝙧𝙚𝙥𝙡𝙖𝙘𝙚𝘾𝙝𝙞𝙡𝙙𝙧𝙚𝙣 𝙖𝙣𝙨𝙬𝙚𝙧 – Mayoralty

Answer 2

2020 Update - use the replaceChildren() API!

Replacing all children can now be done with the (cross-browser supported) replaceChildren() API:

container.replaceChildren(...arrayOfNewChildren);

This will do both: a) remove all existing children, and b) append all of the given new children, in one operation.

You can also use this same API to just remove existing children, without replacing them:

container.replaceChildren();

This is supported in Chrome/Edge 86+, Firefox 78+, and Safari 14+. It is fully specified behavior. This is likely to be faster than any other proposed method here, since the removal of old children and addition of new children is done a) without requiring innerHTML, and b) in one step instead of multiple.

Crewelwork

Safari doesn't support replaceChildren as of Feb 2021, source – Goforth

Yes, it does. Did you try it in Safari? It works great. I've raised an issue with MDN to get the compat data corrected. – Crewelwork

Also, please don't edit my post to make it less accurate. I've put back Safari 14+. – Crewelwork

MDN data has now been corrected to show Safari support: caniuse.com/?search=replacechildren – Crewelwork

replaceChildren() with nothing inside is not working for me on Safari 14.0.3 (macOS). It works with replaceChildren('') or replaceChildren([]). Pretty weird – Houston

Damn, I thought the "..." was just an ellipse, but was the necessary syntax. Without "...", it just add the string of the array itself. – Carreon

Answer 3

Use modern JS! Directly use remove rather than removeChild

while (container.firstChild) {
    container.firstChild.remove();
}

Alternatively:

let child;
while (child = container.firstChild) {
    child.remove();
}

Susy

How portable is it? – Uchida

This should only be used if backward compatibility is, and will never be, an issue. I don't think of code in terms of "modern", but in terms of "flexibility" and if I must type a few more characters to leave backward compatibility, why not.. good habit – Chauvin

Answer 4

It is not directly solving the question but in most cases it is usable and probably one of the more performant ways.

You can swap out the whole node instead of deleting and filling its content.

oldNode.parentElement.replaceChild(newNode, oldNode)

Political

This modern one-liner is easier to grasp: oldNode.replaceWith(newNode). replaceWith has very good support. – Primogeniture

Answer 5

A possible alternative where setting innerHTML doesn't work:

while(container.firstChild)
{
  container.removeChild(container.firstChild);
}
container.appendChild(newChild)

Armistice

There's (nearly) zero chance innerHTML "doesn't work". Maybe a re-phrasing should be considered – Chauvin

Answer 6

from the top answer, we could also use outerHTML to do it in one line.

container.innerHTML = newContainerElements.outerHTML

Option

how didn't i think of that... now instead of cloning an element removing all attributes from it then removing all children from the new element and appending the new one I can just do this: popup.innerHTML = `<picture>${target.parentElement.innerHTML}</picture>`; – Ahlgren