Firefox中的HTML <template>为空(devtools,在document.importNode()之后)
tre*_*eno 4 firefox html5 web-component firefox-developer-tools html5-template
我想使用html-templates.使用Chrome一切正常,但在Firefox中,template-element没有任何内容......也许它只是在调试器中没有显示,但是当我尝试实例化模板的内容时我也没有得到任何内容.
这个模板元素:
...
<body>
<template>qwertz</template>
</body>
...
当我检查Firefox调试器中的元素时,没有任何内容(我希望"qwertz").看起来很简单......但不幸的是我看不到我在这里失踪的东西......
Firefox的devtools Inspector不会template在其DOM视图的主窗口中显示内容.
如果要检查templateFirefox的Inspector中的内容,您需要:
- 右键单击
template检查器中的元素. - 选择" 显示DOM属性".
然后,Firefox devtools将显示"属性"窗格,您可以在其中浏览template元素的所有DOM属性.
因此,您可以template通过查看innerHTML酒店或俯视酒店来查看内容content.
至于如何实例化模板的内容,这里有一个简单的例子:
var templateContent = document.querySelector("template").content,
templateContentClone = document.importNode(templateContent, true)
document.body.appendChild(templateContentClone)<!doctype html>
<body>
<template>qwertz</template>
</body>要理解的重要部分是,如果要对模板内容执行任何操作,则需要使用Document.importNode()或克隆/导入内容Node.cloneNode().