将HTML字符串转换为DOM元素？

Question

将HTML字符串转换为DOM元素？是否有一种方法可以将HTML转换为：<div><a href="#"></a><span></span></div>或者任何其他HTML字符串进入DOM元素？(所以我可以用附录儿童()。我知道我可以做.innerHTML和.innerText，但这不是我想要的-我真的希望能够将一个动态HTML字符串转换成一个DOM元素，这样我就可以将它传递到一个.Appchild()中。更新：似乎出现了混乱。我在字符串中包含HTML内容，作为JavaScript中变量的值。文档中没有HTML内容。

Answer 1

您可以使用DOMParser，就像这样：

    var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";

    doc = new DOMParser().parseFromString(xmlString, "text/xml");

    console.log(doc.firstChild.innerHTML); // => <div id="foo">...

    console.log(doc.firstChild.firstChild.innerHTML); // => <a href="#">...

Answer 2

通常创建一个临时父元素，可以将innerHTML，然后提取内容：

var wrapper= document.createElement('div');wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';var div= wrapper.firstChild;

如果您得到的外部HTML元素是一个简单的<div>在这里，这很容易。如果它可能是别的东西不能去任何地方，你可能会有更多的问题。例如，如果它是一个<li>，您必须让父包装器成为<ul>.

但IE不会写innerHTML关于像这样的元素<tr>所以如果你有一个<td>您必须将整个HTML字符串包装在<table><tbody><tr>...</tr></tbody></table>，写那，那个到innerHTML把实际<td>你想从几个层次下来。