[英]JavaScript: when string added to DocumentFragment.innerHTML, there are no children, how to fix?
When some html string added to DocumentFragment innerHTML
property, there are no children exists.当某些 html 字符串添加到 DocumentFragment
innerHTML
属性时,没有子项存在。 But same action with Element created by createElement
show children.但与由
createElement
创建的 Element 相同的操作显示子级。 I created simple example for comparing innerHTML behavior for DocumentFragment and simple 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
But fragment can show children added by appendChild:但是片段可以显示由 appendChild 添加的孩子:
const span = document.createElement('span');
const fragment2 = document.createDocumentFragment();
fragment2.appendChild(span);
console.log('fragment children for appendChild', fragment2.children);
How to fix this weird DocumentFragment behavior?如何解决这种奇怪的 DocumentFragment 行为?
ADDITIONAL : I need DocumentFragment as temporary HTML container.附加:我需要 DocumentFragment 作为临时 HTML 容器。
div
inherits from the HTMLElement
prototype, a child of the Node
prototype div
继承自HTMLElement
原型,它是Node
原型的子元素
DocumentFragment
inherits directly from the Node
prototype. DocumentFragment
直接继承自Node
原型。
This is to say that div
has all of the Node methods and properties as well as all HTMLElement methods and properties.这就是说
div
具有所有 Node 方法和属性以及所有 HTMLElement 方法和属性。
DocumentFragment
only has Node methods and properties. DocumentFragment
只有 Node 方法和属性。
Though the Node prototype has the ability to have children, innerHTML
does not exist as an innate property.尽管 Node 原型可以拥有子节点,但
innerHTML
并不作为先天属性存在。 This is only available on HTMLElement
and its children (in this case HTMLDivElement
).这仅适用于
HTMLElement
及其子项(在本例中HTMLDivElement
)。
Assigning to innerHTML
on a child of a Node
prototype simply creates the property innerHTML
with your string as a value, but does nothing more.分配给
Node
原型的子节点上的innerHTML
只是创建属性innerHTML
并将您的字符串作为值,但仅此而已。
Basically, elements have internal wiring that tells them what to do
when innerHTML
is assigned/updated.基本上,元素有内部连接,告诉他们在分配/更新
innerHTML
时do
什么。 Nodes do not.节点没有。
You can see this below:您可以在下面看到:
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) );
In order to use something as a container
and utilize innerHTML
you would really just need to create an element that contains what you're trying to add.为了将某些东西用作
container
并利用innerHTML
,您实际上只需要创建一个包含您要添加的内容的元素。 You can use a number of different things like a template
Element or DOMParser
, but honestly the easiest is just to create a separate div
and classify it as a container
您可以使用许多不同的东西,例如
template
Element 或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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.