JavaScript：当字符串添加到DocumentFragment.innerHTML时，没有children，如何解决？

Question

当一些 html 字符串添加到 DocumentFragment innerHTML 属性时，没有 children 存在。但与 createElement 创建的元素相同的操作显示 children。我创建了一个简单示例来比较 DocumentFragment 和简单元素的内部 HTML 行为：

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

但是fragment可以显示由appendChild添加的children:

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

如何修复这种奇怪的 DocumentFragment 行为？

额外：我需要 DocumentFragment 作为临时 HTML 容器。

JSFiddle 重现问题。

Answer 1

div继承自HTMLElement原型，一个child的Node原型

DocumentFragment 直接继承自 Node 原型。

也就是说 div 具有所有 Node 方法和属性以及所有 HTMLElement 方法和属性。

DocumentFragment 只有 Node 方法和属性。

虽然Node原型有children的能力，但是innerHTML并不作为天生的属性存在。这仅适用于 HTMLElement 及其 children（在本例中为 HTMLDivElement）。

在 Node 原型的 child 上分配给 innerHTML 只是创建属性 innerHTML 并将您的字符串作为值，但什么都不做更多

基本上，当 innerHTML 是 assigned/updated 时，元素有内部接线告诉它们 do 什么。节点没有。

您可以在下面看到这个：

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) );

为了将某些东西用作 container 并利用 innerHTML，您实际上只需要创建一个包含您要添加的内容的元素。您可以使用许多不同的东西，例如 template 元素或 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;
}

JavaScript：当字符串添加到DocumentFragment.innerHTML时，没有children，如何解决？

JavaScript: when string added to DocumentFragment.innerHTML, there are no children, how to fix?

javascript

documentfragment