Sostituire contenuto degli elementi con frammento di documento javascript

Question

che sto cercando di sostituire tutti i contenuti di un elemento con un frammento di documento:

var frag = document.createDocumentFragment()

Il frammento di documento è stato creato proprio bene. Nessun problema lì. Aggiungo elementi in modo corretto, senza problemi neanche lì. Posso aggiungerlo usando element.appendChild(frag). Funziona anche bene.

Sto provando a creare un metodo "sostituisci" simile all'HTML di jQuery. Non sono preoccupato per la compatibilità con i vecchi browser. Esiste una funzione magica per sostituire tutto il contenuto di un elemento?

ho cercato element.innerHTML = frag.cloneNode(true), (come da ogni 'sostituire l'elemento contenuti' wiki ho potuto trovare), che non funziona. Mi dà <div>[object DocumentFragment]</div>.

No Biblioteche, per favore. Ciò significa che se si inserisce una soluzione jQuery come risposta, si otterrà downvoted. Non cercare di essere un coglione, ma succede OGNI tempo.

Grazie!

EDIT Per chiarezza, sto cercando una soluzione "magica", io so come rimuovere tutti gli elementi esistenti, uno alla volta e quindi accodare il mio frammento.

Answer 1

Hai provato replaceChild

qualcosa di simile a questa fonte

element.parentNode.replaceChild(frag, element) 

: https://developer.mozilla.org/en-US/docs/DOM/Node.replaceChild

jsFiddle originale: http://jsfiddle.net/tomprogramming/RxFZA/

EDIT: ahh, non ho visto sostituire il contenuto. Bene, rimuovili prima!

element.innerHTML = ""; 
element.appendChild(frag); 

jsfiddle: http://jsfiddle.net/tomprogramming/RxFZA/1/

nota che nel jsfiddle, io uso solo jQuery per collegare il pulsante, la totalità del gestore click è javascript crudo.

Edit2: suggerito anche da pimvdb, ma basta aggiungere le nuove cose a un elemento scollegato e sostituirlo.

var newElement = element.cloneNode(); 
newElement.innerHTML = ""; 
newElement.appendChild(frag); 
element.parentNode.replaceChild(newElement, element); 

http://jsfiddle.net/tomprogramming/RxFZA/3/

Answer 2

EDIT (causa la mia risposta originale era semplicemente stupido):

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

Answer 3

provare questa risposta magica dal 2017, dal campo contentEditable e 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)