html5 - HTML <template> is empty in Firefox (devtools and after document.importNode()) -

-

i use html-templates. using chrome works, in firefox template-element doesn't have content... maybe not shown in debugger, when try instantiate content of template don't content.

this template-element:

... <body>     <template>qwertz</template> </body> ...

doesn't have content (i expect "qwertz") when inspect element in firefox debugger. seems pretty simple... unfortunatly can't see i'm missing here...

firefox’s devtools inspector doesn’t show template contents in main window of dom view.

if want examine template contents in firefox’s inspector, need to:

  1. right-click on template element in inspector.
  2. choose show dom properties.

firefox devtools show properties pane, can explore dom properties of template element.

so there can see template contents looking @ innerhtml property, or looking down through content property.

dom view of <template> element

as far how instantiate contents of template, here’s simple example:

var templatecontent = document.queryselector("template").content,      templatecontentclone = document.importnode(templatecontent, true)  document.body.appendchild(templatecontentclone)
<!doctype html>  <body>    <template>qwertz</template>  </body>

the important part understand if want template contents, need clone/import contents using document.importnode() or node.clonenode().


Comments

Post a Comment