当字符串添加到 DocumentFragment.innerHTML 时，没有孩子，如何解决？

Question

当一些 html 字符串添加到 DocumentFragmentinnerHTML属性时，不存在子元素。但是与createElement表演儿童创建的元素相同的动作。我创建了一个简单的例子来比较 DocumentFragment 和 simple Element 的 innerHTML 行为：

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 容器。

Answer 1

div从继承HTMLElement原型中，一个孩子Node原型DocumentFragment直接从Node原型继承。也就是说，它div具有所有 Node 方法和属性以及所有 HTMLElement 方法和属性。DocumentFragment 只有 Node 方法和属性。尽管 Node 原型具有生育孩子的能力，innerHTML但并不作为先天属性存在。这仅适用于HTMLElement及其子项（在本例中HTMLDivElement）。分配给原型innerHTML的子代Node只是innerHTML用您的字符串作为值创建属性，但仅此而已。基本上，元素具有内部连线，可以告诉它们do何时innerHTML分配/更新什么。节点没有。您可以在下面看到这一点：const fragment = document.createDocumentFragment();const div = document.createElement('div');console.log("innerHTML in fragment: " + ('innerHTML' in fragment) );console.log("innerHTML in element: " + ('innerHTML' in div) );为了将某些东西用作 acontainer并加以利用，innerHTML您实际上只需要创建一个包含您要添加的内容的元素。您可以使用许多不同的东西，例如templateElement 或DOMParser，但老实说，最简单的方法是创建一个单独的div并将其分类为containerlet container = document.createElement("div");container.className = "container";let div = document.createElement("div");container.className = "child";container.appendChild(div);document.body.appendChild(container);.container {width: 100px;height: 100px;border: 1px solid red;}.child {&nbsp;width: 10px;&nbsp;height: 10px;&nbsp;border: 1px solid green;}