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

Question

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

var frag = document.createDocumentFragment()

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

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

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

Нет библиотек, пожалуйста. Это означает, что если вы поставите решение jQuery в качестве ответа, вы будете лишены права голоса. Не пытаясь быть придурком, но это происходит КАЖДЫЙ раз.

Спасибо!

РЕДАКТИРОВАТЬ Для ясности, я ищу "волшебное" решение, я знаю, как удалить все существующие элементы по одному, а затем добавить свой фрагмент.

Answer 1

Ты пытался replaceChild

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

element.parentNode.replaceChild(frag, element)

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

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

РЕДАКТИРОВАТЬ: ааа, я не видел заменить содержимое. Ну, сначала удалите их!

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/

Answer 2

Попробуйте этот ответ Magic с 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)

Answer 3

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

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