Replacing all children of an HTMLElement?

javascript dhtml
Rawler picture Rawler · Feb 14, 2011 · Viewed 31k times · Source

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.

Answer

Stefan picture Stefan · Feb 14, 2011

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 :)

Related questions

How do I retrieve an HTML element's actual width and height?

Suppose that I have a <div> that I wish to center in the browser's display (viewport). To do so, I need to calculate the width and height of the <div> element. What should I use? Please …

Read More
jQuery document.createElement equivalent?

I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on. var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; …

Read More
Print <div id="printarea"></div> only?

How do I print the indicated div (without manually disabling all other content on the page)? I want to avoid a new preview dialog, so creating a new window with this content is not useful. The page contains a couple …

Read More