HTML 模板元素：说明答案

【问题标题】：HTML Template Element: ClarificationHTML 模板元素：说明
【发布时间】：2016-06-28 01:26:54
【问题描述】：

我最近发现了 HTML template 元素，希望得到澄清。

据我所知，三个显着特征是：

template 未呈现在屏幕上
template 不会进入 DOM
还有一个额外的content 属性，它充当template 及其内容之间的虚拟元素

除此之外，<template> 可能是 div，隐藏在屏幕和 DOM 之外。在这方面，用于利用template 的JavaScript 与尝试使用div 伪造一个相同。

问题是，这是正确的吗？我问是因为：

我只需要在自己的脑海中弄清楚
为不支持的浏览器伪造一个相对容易。

谢谢

【问题讨论】：

标签： javascript html templates html5-template

【解决方案1】：

有一些主要区别：

<template> 元素中的
脚本 (<script>)不会立即执行。
媒体内容（<audio>、<video>、<img>）在模板内不会立即加载。

相反，它们将在插入呈现的 DOM 树中后被执行或加载。
querySelector() 方法调用和 CSS 选择器不会探索<template> 的内容，但您仍然可以通过在其content 属性上使用querySelector() 来访问其中的元素。
使用 HTML5 模板，您可以以 Document Fragment 的形式访问其所有内容，并使用 appendChild() 将其插入到 DOM 树中，而不是修改 innerHTML。
<template> 元素可以放在<head> 元素中。
您可以使用.innerHTML 作为字符串访问模板内容，或者使用.content 作为 DocumentFragment 访问模板内容。

那么要伪造所有这些行为是相当困难的。有some polyfills 可以部分做到这一点。我推荐Neovov's one。

看看这个说明性的例子：

//explore the content of the template
var script = T1.content.querySelector( 'script' )
console.log( script.innerHTML )

function insert() {
  //insert the real templete
  Target1.appendChild( T1.content.cloneNode( true ) )
  //insert the fake template
  Target2.innerHTML += D1.innerHTML
}

<template id=T1>
  Real Template -
  <script>console.log( 'executed at each insertion' )</script>
</template>

<div hidden id=D1>
  Fake Template -
  <script>console.log( 'executed only at parsing' )</script>
</div>

<button onclick="insert()">insert</button>

<div id=Target1><div>
<div id=Target2><div>

【讨论】：

只是添加到您的列表中： 6. 您使用 template.content 访问模板内容。但是我注意到，您仍然必须克隆内容——这不是自动完成的，这可能是 template 这个词所暗示的。谢谢你的回答。

【解决方案2】：

简而言之，模板标签就是它听起来的样子。它只是 JavaScript 未来创建的模板。

虽然它与隐藏的<div> 略有不同，但基本上你是对的，它可以用隐藏的div 伪造

想象一下这种情况，您的网页有 2 个输入，一个输入您的姓名，一个输入您的年龄。通过使用 template 标记创建一个简单的表格，您可以使用 JavaScript 在同一页面中使用您的输入填充表格。

这篇文章有一个很好的阅读： https://www.sitepoint.com/html5-template-tag/

【讨论】：