Question

我希望实现以下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时删除所有注释。

有任何变通方法吗？这有可能吗？

Answer 1

终于找到了答案：jQuery已经完成了parseHTML()方法中的所有脏工作。我碰巧正在使用jQuery，这对我很好！：）

我检查了幕后的魔力，这真的非常可怕。首先，他们检查HTML（使用regexs ...）以查看他们需要使用哪个父标记，然后他们有一个IE8的解决方法，显然它保留了注释节点 - 但只有在他们来之后文本节点。第一个文本节点之前的所有注释都将丢失。有些标签也会受到这种影响，我不知道。 IE浏览器还有其他六种解决方法。 Webkit问题，我从来没有听说过。

所以，我只是留给他们做正确的事情，因为尝试重现那些东西将是madness。

如何在Javascript中将混合的HTML-string / DOM元素转换为DOM元素？

1 个答案: