JavaScript: скопировать узел в DocumentFragment

Question

Я понял, что весь смысл DocumentFragment в том, чтобы иметь возможность создавать содержимое, не касаясь DOM, пока он не будет готов к работе.

Учитывая, что DocumentFragment не поддерживает innerHTML, это может быть немного утомительно. С другой стороны, после создания легко добавить содержимое в существующий узел DOM с помощью самого фрагмента.

Если я создам div не добавляя его в DOM, я могу заполнить его, как мне нравится, в том числе innerHTML, Насколько я могу судить, это никак не повлияет на производительность.

Есть ли простой способ (т.е. в одну строку или около того), чтобы скопировать содержимое существующего узла DOM в DocumentFragment? Процесс будет выглядеть так:

var div=document.createElement('div');
var fragment=document.createDocumentFragment();
div.innerHTML='…';
//  copy contents to fragment
//  etc

Таким образом, я мог получить лучшее из обоих миров.

Ответ

Вот ответ @KevBot ниже, включенный в пример:

var divTest=document.querySelector('div#test');

var html='<p>One</p><p>Two</p>';
var fragment=document.createRange().createContextualFragment(html);

divTest.appendChild(fragment);

Answer 1

Да, вы можете легко создать фрагмент со строкой HTML, используя document.createRange метод.

document.createRange возвращает Range объект, который имеет метод с именем createContextualFragment который позволяет получить фрагмент только из HTML.

function fragmentFromString(strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}

let div = document.createElement('div');
div.innerHTML = '<p>Testing</p>';

let fragment = fragmentFromString(div.innerHTML);
console.log(fragment);

<div>
  <p>Random Content</p>
</div>

Работает во всех основных браузерах и IE11.

Answer 2

Вы можете создать <template> элемент, который является фрагментом документа; задавать .innerHTML из template элемент, и получить .innerHTML из template использование элемента .content имущество

var template = document.createElement("template");
var div = document.createElement("div");
div.innerHTML = "<p>abc</p>";
template.innerHTML = div.innerHTML;
document.body.appendChild(template.content);

Answer 3

Попробуйте это для размера

text = frag.appendChild( document.createTextNode( "insert text here" ) )

или же

text = frag.appendChild( document.createTextNode( div.innerHTML ) )

или же

text = frag.appendChild( document.createTextNode( div.textContent ) )

text переменная будет содержать текстовый узел, в то время как вы также добавили текстовый узел в одну строку

Answer 4

Ты можешь использовать appendChild добавить новый элемент к фрагменту.

var div=document.createElement('div');
var fragment=document.createDocumentFragment();
div.innerHTML='…';

fragment.appendChild(div);

Если вы хотите только вставить содержимое элемента во фрагмент, то вы можете перебрать childNodes и вставьте их во фрагмент.

div.childNodes.forEach(function(node) {
    fragment.appendChild(node);
});