-2

当某些 html 字符串添加到 DocumentFragmentinnerHTML属性时，不存在子级。但与由createElementshow children 创建的 Element 相同的操作。我创建了一个简单的示例来比较 DocumentFragment 和简单元素的 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 容器。

JSFiddle与重现问题。

4

1 回答 1

3

div从原型继承，原型HTMLElement的孩子Node

DocumentFragment直接继承Node原型。

也就是说，它div拥有所有的 Node 方法和属性以及所有的 HTMLElement 方法和属性。

DocumentFragment只有 Node 方法和属性。

虽然 Node 原型可以拥有子节点，innerHTML但它并不作为与生俱来的属性存在。这仅适用于HTMLElement及其子项（在本例中HTMLDivElement）。

在原型innerHTML的子节点上赋值只是用您的字符串作为值创建属性，但仅此而已。NodeinnerHTML

基本上，元素具有内部布线，可以告诉它们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) );

为了将某些东西用作container和利用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;
}

于 2019-11-11T22:44:00.223 回答