- Jun 2023
-
stackoverflow.com stackoverflow.com
-
HTML 5 introduced the <template> element which can be used for this purpose (as now described in the WhatWG spec and MDN docs). A <template> element is used to declare fragments of HTML that can be utilized in scripts. The element is represented in the DOM as a HTMLTemplateElement which has a .content property of DocumentFragment type, to provide access to the template's contents. This means that you can convert an HTML string to DOM elements by setting the innerHTML of a <template> element, then reaching into the template's .content property.
```js /* * @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>'); ```
-
-
johnresig.com johnresig.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org