JavaScript: когда строка добавлена ​​в DocumentFragment.innerHTML, дочерних элементов нет, как это исправить? - PullRequest
Новая
       59

JavaScript: когда строка добавлена ​​в DocumentFragment.innerHTML, дочерних элементов нет, как это исправить?

0 голосов
/ 12 ноября 2019

Когда в свойство DocumentFragment innerHTML добавлена ​​какая-либо строка html, дочерних элементов не существует. Но то же самое действие с Элементом, созданным createElement, покажет детям. Я создал простой пример для сравнения поведения innerHTML для DocumentFragment и простого Element: 

const fragment = document.createDocumentFragment();
const div = document.createElement('div')

fragment.innerHTML = "<i>Test</i>";
console.log('fragment children:', fragment.children); // empty
fragment.innerHTML = "<i><b>Test</b></i>";
console.log('fragment children:', fragment.children); // empty

div.innerHTML = "<i>Test</i>";
console.log('div children:', div.children) // has children
div.innerHTML = "<i><b>Test</b></i>";
console.log('div children:', div.children)  // has children

Но фрагмент может показать детей, добавленных appendChild: 

const span = document.createElement('span');
const fragment2 = document.createDocumentFragment();
fragment2.appendChild(span);
console.log('fragment children for appendChild', fragment2.children);

Как исправить это странное поведение DocumentFragment?

ДОПОЛНИТЕЛЬНО : мне нужен DocumentFragment как временный контейнер HTML.

JSFiddle с воспроизведением проблемы.

...