Replace element contents with document fragment javascript

EDIT (cause my original answer was just plain dumb):

var rep = document.createElement("div");
rep.appendChild(frag);
element.innerHTML = rep.innerHTML;

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)

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/