Блог

Я пытаюсь использовать DocumentFragment в качестве точки вставки других элементов что-то вроде этого:

 const parent = document.createElement('div');
const container = document.createDocumentFragment();
parent.appendChild(container);

// the following code should produce <div><p></p></div>
const child = document.createElement('p');
container.appendChild(child);

// when the following code execute it should produce <div></div>
container.removeChild(child);
 

Главная проблема в том, что это не работает. Любые элементы, вставленные container после того, как они были вставлены parent , не отображаются parent . Моя цель состоит в том, что я хочу container действовать как прозрачный родитель для своих детей, чтобы селектор CSS видел своих детей как детей parent .

Это не то, как appendChild работает с фрагментом документа. Использование appendChild фрагмента документа добавляет дочерние фрагменты, а не сам фрагмент.

См. Стандарт Dom — 4.2.3. Алгоритмы мутации — «Для вставки узла в родительский…

Похоже, вы не можете выполнить это с помощью DocumentFragment . См. Mozilla MDN:

Обычно используется для DocumentFragment его создания, сборки поддерева DOM внутри него, затем добавления или вставки фрагмента в DOM [ … ]. При этом узлы фрагмента перемещаются в DOM, оставляя пустой фрагмент документа.

Вы можете проверить это поведение с помощью консоли:

 > const container = document.createDocumentFragment();
> container.appendChild(document.createElement('span'));
> container // contains the span element
▼ #document-fragment
    <span>​</span>​
> const parent = document.createElement('div');
> parent.appendChild(container);
> parent
▼ <div>
    ​<span>​</span>
  ​</div>​
> container // is now empty
    #document-fragment