使用内置的DOM方法或原型从HTML字符串创建新的DOM元素

Question

使用内置的DOM方法或原型从HTML字符串创建新的DOM元素我有一个表示元素的HTML字符串：'<li>text</li>'..我想把它附加到DOM中的一个元素(ul就我而言)。如何使用原型或DOM方法完成此操作？(我知道在jQuery中可以很容易地做到这一点，但不幸的是，我们没有使用jQuery。)

Answer 1

HTML 5引入了<template>元素，可用于此目的(如WhatWG规范和MDN文档).

A <template>是一个HTML元素，它允许任何其他元素类型作为子元素。这个template有一个.content属性，您可以使用JavaScript访问该属性，该属性指向DocumentFragment模板的内容。这意味着您可以通过设置innerHTML一种<template>元素，然后深入到template氏.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在一些旧浏览器中不支持。截至2008年1月，我能用.。估计数全球90%的用户使用支持templates..特别是，InternetExplorer的任何版本都不支持它们；Microsoft没有实现template支持到边缘的发布。

如果您很幸运地编写了只针对现代浏览器上的用户的代码，那么现在就开始使用它们吧。否则，您可能需要等待一段时间才能赶上用户。