Replace element contents with document fragment javascript
Solution 1
Have you tried replaceChild
something like this
element.parentNode.replaceChild(frag, element)
source: https://developer.mozilla.org/en-US/docs/DOM/Node.replaceChild
original jsFiddle: http://jsfiddle.net/tomprogramming/RxFZA/
EDIT: ahh, I didn't see replace contents. Well, just remove them first!
element.innerHTML = "";
element.appendChild(frag);
jsfiddle: http://jsfiddle.net/tomprogramming/RxFZA/1/
note that in the jsfiddle, I only use jquery to hook up the button, the entirety of the click handler is raw javascript.
Edit2: also suggested by pimvdb, but just append the new stuff to a detached element and replace.
var newElement = element.cloneNode();
newElement.innerHTML = "";
newElement.appendChild(frag);
element.parentNode.replaceChild(newElement, element);
http://jsfiddle.net/tomprogramming/RxFZA/3/
Solution 2
2017:
Try this Magic answer from ContentEditable field and Range
var range = document.createRange(); // create range selection
range.selectNodeContents($element); // select all content of the node
range.deleteContents() // maybe there is replace command but i'm not find it
range.insertNode(frag)
Solution 3
EDIT (cause my original answer was just plain dumb):
var rep = document.createElement("div");
rep.appendChild(frag);
element.innerHTML = rep.innerHTML;
Randy Hall
I do some pretty odd web stuff. Basically, I'm an uneducated code monkey who likes to play. Sometimes, it turns out cool. Sometimes I build a square wheel. It's all good.
Updated on June 06, 2022Comments
-
Randy Hall about 2 years
I'm trying to replace all contents of an element with a document fragment:
var frag = document.createDocumentFragment()
The document fragment is being created just fine. No problems there. I add elements to it just fine, no problems there either. I can append it using
element.appendChild(frag)
. That works just fine too.I'm trying to create a "replace" method similar to jQuery's HTML. I'm not worried about old-browser compatibility. Is there a magical function to replace all content of an element?
I have tried
element.innerHTML = frag.cloneNode(true)
, (as per every 'replace element content' wiki I could find), that doesn't work. It gives me<div>[object DocumentFragment]</div>
.No libraries, please, not even a jQuery solution.
For clarity, I'm looking for a "magic" solution, I know how to remove all the existing elements one at a time and then append my fragment.
-
Randy Hall over 11 yearsNot quite, sorry. This replaces the element with the fragment, I need to replace the element's content with the fragment.
-
Randy Hall over 11 yearsBetter! Ideally, I could do it in one go, so as to avoid a browser redraw on
element.innerHTML = ""
- however, this is probably the best solution so far (also suggested by @pimvdb). Still hoping someone has something magic! -
Randy Hall over 11 yearsSee answer below, very similar to your element clone method but with ranges.
-
pimvdb over 11 yearsLooks like this strips all elements and only sets the textual contents. Personally, I think all "magical" solutions are a bit... odd.
removeChild
/appendChild(frag)
should work fine. -
Randy Hall over 11 yearsIn old IE this will only grab text I believe. However, I'm not worried about anything but the most recent browsers (and mostly just mobile). I'll edit to reflect this in my answer.
-
pimvdb over 11 yearsWell, it fails for me on Chrome 23. Just so you know :)
-
Randy Hall over 11 yearsNevermind, you're completely correct. It is destroying html elements. -1 to my own answer =/
-
Thomas Jones over 11 yearsif you're going to go with ranges, I'd suggest taking a look at code.google.com/p/rangy (I know, no libraries). It normalizes alot of inconsistencies across browsers
-
pery mimon almost 3 yearsupdate answer . you can delete now your extra comments .for cleaner wall