如何在 Javascript 中从混合的 HTML 字符串/DOM 元素转换为 DOM 元素？答案

【问题标题】：How to convert from mixed HTML-string/DOM-elements to DOM-elements in Javascript?如何在 Javascript 中从混合的 HTML 字符串/DOM 元素转换为 DOM 元素？
【发布时间】：2014-12-05 21:08:35
【问题描述】：

我希望实现以下 Javascript 函数：

function AllToDom(partsArray)
{
    // Magic!
}

// Called like:
var rowObject = AllToDom(['<tr>', tdElem1, tdElem2, '<td>XXX</td>', '<td>', 
    divContents,'</td></tr>']);

// Where tdElem1, tdElem2, divContents are DOM node objects.

问题是我希望它适用于 DOM 节点和 HTML 片段的任何类型的组合。当然，只要它产生有效的 HTML。允许未封闭的 HTML 标记和不允许的元素组合（如 <table><div></div>）具有未定义的行为。

我的第一个想法是将它们全部连接到一个 HTML 字符串中，除了在 DOM 元素的位置添加一个占位符注释 。所以上面会产生以下字符串：

<tr><!--SNOOPY--><!--SNOOPY--><td>XXX</td><td><!--SNOOPY--></td></tr>

这已经是一段有效的 HTML，所以接下来我创建一个 <div>，将其分配给 innerHTML，收集生成的 DOM 节点，并遍历它们并将所有  替换为相应的 DOM 元素。

但是，这种方法有两个缺陷：

将<tr> 作为子元素添加到<div> 无效。我不知道它是否在某些情况下不会中断。
Internet Explorer 8（我需要支持的最低版本）在分配给 innerHTML 时会删除所有 cmets。

有什么解决方法吗？这可能吗？

【问题讨论】：

那么，parms 中传递的所有标签和元素都是兄弟，对吧？
@JonathanM - 不，不一定。请参阅示例。
对于缺陷 #2，您可以使用 document.createComment
@AlvaroMontoro - 不，我不能。我需要在 HTML 字符串中插入 SOMETHING ，以便在将其转换为 DOM 元素后，我可以再次找到它并替换为提供的正确元素。评论是我能想到的唯一在任何上下文中有效的东西。
这个想法是：遍历数组，如果元素是字符串，则执行innerHTML += string，否则将document.createComment("string to identify the element later") 附加到div。还是做innerHTML+=之后cmets被淘汰了？

标签： javascript html templates dom internet-explorer-8

【解决方案1】：

终于找到答案了：jQuery 已经在他们的parseHTML() 方法中完成了所有的脏活。而且我只是碰巧在使用 jQuery，对我来说太好了！ :)

我检查了幕后的魔法是什么，这真的很可怕。首先，他们检查 HTML（使用regexs...）以查看他们需要使用的父标签，然后他们有一个针对 IE8 的解决方法，显然它确实保留了注释节点 - 但前提是它们出现在文本之后节点。第一个文本节点之前的所有 cmets 都将丢失。有些标签也受到这种影响，我不知道。还有六种我从未听说过的 IE 和 Webkit 问题的其他解决方法。

所以，我只是让他们去做正确的事情，因为尝试复制这些东西将是madness。

【讨论】：