HTML 模板元素：说明

Question

我最近发现了 HTML template 元素，希望得到一些说明。

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

template 未在屏幕上呈现
template 没有进入 DOM
还有一个额外的 content 属性作为 template 及其内容

除此之外，<template> 可能是 div，隐藏在屏幕和 DOM 之外。在这方面，用于利用 template 的 JavaScript 与试图使用 div.

伪造的相同。

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

我自己想清楚就可以了
为不支持的浏览器伪造一个相对容易。

谢谢

Answer 1

简而言之，模板标签正如其名。它只是供JavaScript以后创建的模板。

尽管它与隐藏的 <div> 略有不同，但基本上你是对的，它可以用隐藏的 div

伪造

想象一下这样的场景，您有一个包含 2 个输入的网页，一个输入您的姓名，一个输入您的年龄。通过使用 template 标签创建一个简单的 table，然后您可以使用 JavaScript 在同一页面中使用您的输入填充 table。

这篇文章很好读： https://www.sitepoint.com/html5-template-tag/

Answer 2

有一些主要区别：

Script (<script>) 在 <template> 元素中 未立即执行 .
媒体内容 (<audio>, <video>, <img>) 模板内获得无法立即加载。

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

然后假装所有这些行为是相当困难的。有some polyfills that can partially do that. I'd recommend 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>

HTML 模板元素：说明

HTML Template Element: Clarification

javascript

html

templates

html5-template