Заменить содержимое элемента фрагментом документа javascript

Я пытаюсь заменить все содержимое элемента на фрагмент документа:

var frag = document.createDocumentFragment()

Фрагмент документа создается просто отлично. Там нет проблем. Я просто добавляю к нему элементы, проблем тоже нет. Я могу добавить его, используя element.appendChild(frag). Это тоже отлично работает.

Я пытаюсь создать метод замены, похожий на jQuery HTML. Я не беспокоюсь о совместимости старых браузеров. Существует ли магическая функция для замены всего содержимого элемента?

Я попытался element.innerHTML = frag.cloneNode(true), (как в каждой вики 'замена элемента содержимого', которую я мог найти), это не работает. Это дает мне <div>[object DocumentFragment]</div>.

Нет библиотек, пожалуйста, даже не решение jQuery.

Для ясности, я ищу "волшебное" решение, я знаю, как удалить все существующие элементы по одному, а затем добавить свой фрагмент.

Ответ 1

Вы пробовали replaceChild

что-то вроде этого

element.parentNode.replaceChild(frag, element)

источник: https://developer.mozilla.org/en-US/docs/DOM/Node.replaceChild

оригинал jsFiddle: http://jsfiddle.net/tomprogramming/RxFZA/

EDIT: ahh, я не видел замены содержимого. Ну, просто удалите их сначала!

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

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

Обратите внимание, что в jsfiddle я использую только jquery для подключения кнопки, весь обработчик клика - это необработанный javascript.

Edit2: также предлагается pimvdb, но просто добавьте новый материал в отдельный элемент и замените.

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

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

Ответ 2

2017:
Попробуйте этот волшебный ответ из поля ContentEditable и 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)

Ответ 3

РЕДАКТИРОВАТЬ (мой первоначальный ответ был просто глупым):

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