Question

我想要一个Javascript函数，当输入是HTML内容时返回正确的DOM。我已经使用了相同的follewing功能。这里的输入是HTML内容，输出是DOM。

function htmltoelement(elementHTML)
{   
    var temDiv = document.createElement('div');
    temDiv.innerHTML = elementHTML;        
    return temDiv;
}

这个功能适用于Firefox，但不适用于IE或Chrome，当HTML被破坏时。

我需要一个功能的建议，即使HTML被破坏，该功能在所有浏览器上也能正常工作。

Answer 1

对于“破坏”的HTML（我假设它是无效的），它的解释方式很大程度上取决于浏览器和浏览器所处的模式。顶部的DOCTYPE将决定在解析innerHTML属性时如何解析它已经设定好了。对于XHTML，它会给你一些奇怪的结果，因为“破碎的”HTML会弄乱整个页面。您正在使用的功能是正确的，但在尝试创建div之前，您似乎需要检查输入是否合规。

Answer 2

您可以通过将其写入隐藏的iframe来实现此目的：

<iframe id="frame" style="display:none"></iframe>
<script type="text/javascript">

function htmltoelement(elementHTML)
{   
    var temp = document.getElementById('frame');

    // Cross-browser way to get the iframe document
    var idoc = (temp.contentWindow || temp.contentDocument);
    if (idoc && idoc.document) idoc = idoc.document;

    // Put the HTML in the iframe
    idoc.write("<html><body>" + elementHTML + "</body></html>");
    temDiv = document.createElement('div');
    temDiv.innerHTML = idoc.body.innerHTML;

    return temDiv;
}

document.body.appendChild(htmltoelement('<b><i>hi</b></i>'));

</script>

隐藏的IFRAME似乎是必要的，document.createElement（'iframe'）在Opera中不起作用。

输入为html内容时返回DOM的Javascript函数

2 个答案: