根据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支持到边缘的发布。

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

你可能感兴趣的:(根据html字符串生成dom)