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

拉风的咖菲猫

HTML 5引入了元素，可用于此目的(如WhatWG规范和MDN文档).A 是一个HTML元素，它允许任何其他元素类型作为子元素。这个template有一个.content属性，您可以使用JavaScript访问该属性，该属性指向DocumentFragment模板的内容。这意味着您可以通过设置innerHTML一种元素，然后深入到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('

foo'),

    div = htmlToElement('

nested  stuff

');/**

 * @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('

foobar');请注意，类似的方法使用不同的容器元素，例如div不太好用。HTML对允许哪些元素类型存在于哪些其他元素类型中有限制；例如，您不能将td作为一个直接的子代div..如果尝试设置innerHTML一种div来控制它们。自S对它们的内容没有这样的限制，这个缺点在使用模板时不适用。然而，template在一些旧浏览器中不支持。截至2008年1月，我能用.。估计数全球90%的用户使用支持templates..特别是，InternetExplorer的任何版本都不支持它们；Microsoft没有实现template支持到边缘的发布。如果您很幸运地编写了只针对现代浏览器上的用户的代码，那么现在就开始使用它们吧。否则，您可能需要等待一段时间才能赶上用户。