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

我有一个表示元素的HTML字符串:”<李>文本&lt/李>'。我想将它附加到DOM中的一个元素(在我的例子中是aul)。如何使用Prototype或DOM方法实现这一点

(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)

注意:大多数当前浏览器支持HTML<模板&gt元素,这提供了一种更可靠的方法,可以从字符串中创建元素。有关详细信息,请参见下面Mark Amery的回答

对于较旧的浏览器和node/jsdom:(在编写本文时还不支持<template>元素),请使用以下方法。这与库从HTML字符串中获取DOM元素所做的事情是一样的(IE需要做一些额外的工作来解决其innerHTML实现中的bug):

函数createElementFromHTML(htmlString){
var div=document.createElement('div');
div.innerHTML=htmlString.trim();
//将此更改为div.childNodes以支持多个顶级节点
返回div.firstChild;
}

请注意,与HTML模板不同,此将不适用于某些不能合法成为子元素的元素<部门&gt,例如<td&gts

如果您已经在使用库,我建议您坚持使用库认可的从HTML字符串创建元素的方法:

  • Prototype在其update()方法中内置了此功能
  • jQuery在其jQuery(html)jQuery.parseHTML方法中实现了它

发表评论