当字符串添加到 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); // emptyfragment.innerHTML = "<i><b>Test</b></i>";console.log('fragment children:', fragment.children); // emptydiv.innerHTML = "<i>Test</i>";console.log('div children:', div.children) // has childrendiv.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并将其分类为container

let 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 {

 width: 10px;

 height: 10px;

 border: 1px solid green;

}