版本：HTML5

HTML元素是一種用于保存客戶端內(nèi)容機制，該內(nèi)容在加載頁面時不會呈現(xiàn)，但隨后可以在運行時使用JavaScript實例化。

瀏覽器支持

Firefox、Opera、Chrome 和 Safari 瀏覽器都支持標簽。
注意:Internet Explorer 瀏覽器不支持標簽。

將模板視為一個可存儲在文檔中以便后續(xù)使用的內(nèi)容片段。雖然解析器在加載頁面時確實會處理元素的內(nèi)容，但這樣做只是為了確保這些內(nèi)容有效；但元素內(nèi)容不會被渲染。

Content categoriesPermitted contentTag omissionPermitted parentsPermitted ARIA rolesDOM接口

Metadata content,flow content,段落內(nèi)容元素, script-supporting element

No restrictions

不允許，開始標簽和結(jié)束標簽都不能省略。

,,,andwithout aspanattribute

None

HTMLTemplateElement

屬性

此元素僅包含全局屬性。

但，HTMLTemplateElement有個屬性：content,這個屬性是只讀的DocumentFragment包含了模板所表示的DOM樹。

示例

首先我們從示例的HTML部分開始。

upc_code

product_name

首先，我們有一個表，稍后我們將使用JavaScript代碼在其中插入內(nèi)容。然后是模板，它描述了表示單個表行的HTML片段的結(jié)構(gòu)。

既然已經(jīng)創(chuàng)建了表并定義了模板，我們使用JavaScript將行插入到表中，每一行都是以模板為基礎(chǔ)構(gòu)建的。

// 通過檢查來測試瀏覽器是否支持html模板元素// 用于保存模板元素的內(nèi)容屬性。if ('content' in document.createelement('template')) {// 使用現(xiàn)有的html tbody實例化表和該行與模板let t = document.queryselector('#productrow'),td = t.content.queryselectorall("td");td[0].textcontent = "1235646565";td[1].textcontent = "stuff";// 克隆新行并將其插入表中l(wèi)et tb = document.getelementsbytagname("tbody");let clone = document.importnode(t.content, true);tb[0].appendchild(clone);// 創(chuàng)建一個新行td[0].textcontent = "0384928528";td[1].textcontent = "acme kidney beans";// 克隆新行并將其插入表中l(wèi)et clone2 = document.importnode(t.content, true);tb[0].appendchild(clone2);}else {// 找到另一種方法來添加行到表，因為不支持html模板元素。}

結(jié)果是原始的HTML表格，通過JavaScript添加了兩行新內(nèi)容：

標準

SpecificationStatusComment

HTML Living Standardtemplate element	Living Standard
HTML5template element	Recommendation	Initial definition