<template> 标签

<template> 标签存储可以克隆并插入到 HTML 文档中的 HTML 代码片段。
<template> 元素在 DOM 中表示为 HTMLTemplateElement，它具有 DocumentFragment 类型的 .content 属性，以便提供对模板内容的访问。
这允许通过设置 <template> 元素的 innerHTML 将 HTML 字符串转换为 DOM 元素，然后进入 .content 属性。

HTML5 引入了 <template> 元素，可用于从 HTML 字符串创建 DOM 元素。

function htmlToElem(html) {
  let temp = document.createElement('template');
  html = html.trim(); //不返回空文本节点
  temp.innerHTML = html;
  return temp.content.firstChild;
}
let td = htmlToElem('<td>foo</td>'),
  div = htmlToElem('<div><span>nested</span> <span>stuff</span></div>');
alert(td);
alert(div);
/*
  @param {String} HTML representing any number of sibling elements
  @return {NodeList} 
 */
function htmlToElems(html) {
  let temp = document.createElement('template');
  temp.innerHTML = html;
  return temp.content.childNodes;
}
let rows = htmlToElems('<tr><td>foo</td></tr><tr><td>bar</td></tr>');
alert(rows);

所有主要浏览器都支持 <template> 元素。

请注意，HTML 对可以在元素类型中使用的元素类型有限制；例如，<td> 不能作为 <div> 元素的直接子元素。

这会导致元素消失。
<template> 元素对其内容没有这样的限制。