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

Question

有没有办法转换HTML像:

<div>
<a href="#"></a>
<span></span>
</div>

或任何其他HTML字符串到DOM元素？(这样我就可以使用appendChild())了.我知道我可以做.innerHTML和.innerText,但这不是我想要的 - 我真的希望能够将动态HTML字符串转换为DOM元素,以便我可以在.appendChild()中传递它.

更新:似乎有困惑.我有一个字符串中的HTML内容,作为JavaScript中变量的值.文档中没有HTML内容.

Answer 1

您可以使用a DOMParser,如下所示:

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => <a href="#">Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

Answer 2

您通常创建一个可以编写的临时父元素innerHTML,然后提取内容:

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

如果你所拥有的外部HTML的元素很简单<div>,这很容易.如果它可能是其他任何东西都不能去的东西,那么你可能会遇到更多问题.例如,如果是a <li>,则必须将父包装器设为a <ul>.

但IE不能写innerHTML上相似的元素<tr>,如果你有一个这样<td>你不得不包住整个HTML串<table><tbody><tr>...... </tr></tbody></table>,写的是要innerHTML和解脱实际<td>你从几个层面的希望了.

Answer 3

为什么不使用insertAdjacentHTML

例如:

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>here

Answer 4

查看John Resig的纯JavaScript HTML解析器.

编辑:如果您希望浏览器为您解析HTML,innerHTML正是您想要的.从这个SO问题:

var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;

Answer 5

好吧，在我不得不考虑其他人的答案之后，我自己意识到了答案。:P

var htmlContent = ... // a response via AJAX containing HTML
var e = document.createElement('div');
e.setAttribute('style', 'display: none;');
e.innerHTML = htmlContent;
document.body.appendChild(e);
var htmlConvertedIntoDom = e.lastChild.childNodes; // the HTML converted into a DOM element :), now let's remove the
document.body.removeChild(e);