HTML 5 template tag (page refresh)

StackOverflow https://stackoverflow.com/questions/16990169

  •  31-05-2022
  •  | 
  •  

题

I wanted to use the HTML 5 template tag but there's some confusing behaviour after a page refresh. Maybe I show you some code first:

<!doctype html>
<meta charset=utf-8>
<title>HTML 5 - template test</title>

<template>
    <h1>This is an awesome new HTML 5 template</h1>
    <p>.. some even more awesome content .. some even more awesome content .. some even more awesome content .. some even more awesome content .. some even more awesome content</p>
</template>
<div></div>

<script>
var template = document.querySelector('template'),
    templateContent = template.content.cloneNode(true);

console.log(template);
console.log(templateContent);

document.querySelector('div').appendChild(templateContent);
</script>

Actually this works as expected, but there's some confusing stuff going on in the console. When I first open the page it says:

http://i.stack.imgur.com/xDJBo.png

but when I refresh the page it shows up this:

http://i.stack.imgur.com/W23YF.png

When I repeat it I see the stuff from the first picture again. I tried it also on jsbin and there I can't see this behaviour: http://jsbin.com/ofotah/1

I have really no idea what is going on there. I'm using Google Chrome Version 27.0.1453.110 (Windows). Hope you can help me with this.

有帮助吗？

解决方案

This isn't really template related, it's a funky Chrome quirk that manifests sometimes. It'll do the same for other element tags under conditions that are virtually impossible to reproduce, but the actual object content is never affected. It just sometimes grabs the toString() serialization, and sometimes the object serialization.

However, as Andbdrew points out, the template tag is still a draft element, and we're far from any decision on how it should be user properly or how to access them, so given how your example code uses it, I'd recommend just using a <script type="text/template">...</script> element instead, and selecting it with document.querySelector("script[type='text/template']"); rather than using an experimental element =)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top