JavaScript：当字符串添加到DocumentFragment.innerHTML时，没有子项，如何修复？

当某些html字符串添加到DocumentFragment

innerHTML

属性时，不存在子项。但与由

createElement

show子元素创建的元素相同的操作。我创建了比较DocumentFragment和simple元素的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

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

其他：我需要DocumentFragment作为临时HTML容器

---

重新生成问题。

div

继承自

HTMLElement

原型，

节点

原型的子节点

DocumentFragment

直接从

节点继承

也就是说，
div
拥有所有的节点方法和属性以及所有的HtmleElement方法和属性

DocumentFragment
仅具有节点方法和属性

尽管节点原型可以有子节点，
innerHTML
不作为固有属性存在。这仅适用于
HTMLElement
及其子项（在本例中为
HTMLElement
）

在
节点
原型的子节点上分配给
innerHTML
，只需使用字符串作为值创建属性
innerHTML
，但不做更多

基本上，元素有内部连接，告诉它们当
innerHTML
被分配/更新时，应该做什么。节点没有

您可以在下面看到：


const fragment=document.createDocumentFragment（）；
const div=document.createElement（'div'）；
log（“片段中的innerHTML:”+（'innerHTML'片段））；
log（“元素中的innerHTML:”+（'innerHTML'在div中））createElement
创建临时dom？@SergioIvanuzzo不客气。我可以给你一个选择，当然，但你到底在“修复”什么？您只需要一个允许
innerHTML
？我想一个
div
或
部分就足够了。另外：我需要一个临时容器，可以在上面应用querySelector太棒了！顺便说一句，当在这个容器上执行某些操作时，它会影响DOM吗？@SergioIvanuzzo当您附加到DOM时，您所附加的内容的克隆就是所添加的内容
appendChild
返回添加的DOM节点。因此，如果需要编辑DOM节点，为了获得引用，只需执行类似于
let editable=document.body.appendChild（容器）的操作；editable.id=“newid”
const span = document.createElement('span');
const fragment2 = document.createDocumentFragment();
fragment2.appendChild(span);
console.log('fragment children for appendChild', fragment2.children);