HTML 5 представив <template>
елемент, який можна використовувати для цієї мети (як описано зараз у специфікаціях WhatWG та MDN) ).
<template>
Елемент використовується для оголошення фрагменти HTML , які можуть бути використані в сценаріях. Елемент представлений у DOM як a, HTMLTemplateElement
який має .content
властивість DocumentFragment
типу, забезпечувати доступ до вмісту шаблону. Це означає , що ви можете перетворити рядок HTML для елементів DOM, встановивши innerHTML
з <template>
елемента, потім досягаючи в template
«S .content
власності.
Приклади:
/**
* @param {String} HTML representing a single element
* @return {Element}
*/
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
var td = htmlToElement('<td>foo</td>'),
div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');
/**
* @param {String} HTML representing any number of sibling elements
* @return {NodeList}
*/
function htmlToElements(html) {
var template = document.createElement('template');
template.innerHTML = html;
return template.content.childNodes;
}
var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');
Зауважте, що подібні підходи, що використовують інший елемент контейнера, такий якdiv
не зовсім працює. HTML має обмеження щодо того, які типи елементів можуть існувати, в яких інших типах елементів; наприклад, ви не можете поставити а td
як пряму дитину div
. Це призводить до зникнення цих елементів, якщо ви спробуєте встановити innerHTML
а, div
щоб він містив їх. З тих пір<template>
s не мають таких обмежень щодо їх вмісту, цей недолік не застосовується при використанні шаблону.
Однак template
він не підтримується в деяких старих браузерах. Чи можу я використати станом на січень 2018 року ... приблизно 90% користувачів у всьому світі користуються браузером, який підтримує template
s . Зокрема, жодна версія Internet Explorer не підтримує їх; Microsoft не реалізувала template
підтримку до випуску Edge.
Якщо вам пощастило писати код, орієнтований лише на користувачів у сучасних браузерах, продовжуйте користуватися ними прямо зараз. В іншому випадку, можливо, доведеться почекати деякий час, коли користувачі зможуть наздогнати.