是否有一种方法可以像这样转换HTML:
<div>
<a href="#"></a>
<span></span>
</div>
或任何其他HTML字符串到DOM元素?(这样我就可以使用appendChild())。我知道我可以做. innerhtml和. innertext，但这不是我想要的——我实际上希望能够将动态HTML字符串转换为DOM元素，以便我可以在. appendchild()中传递它。
更新:似乎有些混乱。我有一个字符串的HTML内容，作为JavaScript变量的值。文档中没有HTML内容。
当前回答
你可以像这样使用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=“#”>链接... console.log（doc.firstChild.firstChild.innerHTML）;=> 链接
其他回答
只需给元素一个id并正常处理即可。
<div id="dv">
<a href="#"></a>
<span></span>
</div>
现在你可以这样做:
var div = document.getElementById('dv');
div.appendChild(......);
或者使用jQuery:
$('#dv').get(0).appendChild(........);
你通常创建一个临时的父元素，你可以写innerHTML，然后提取内容:
var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';
var div= wrapper.firstChild;
如果您所获得的外部html元素是一个简单的<div>，就像这里一样，这很容易。如果它可能是其他任何地方都不能去的东西，你可能会有更多的问题。例如，如果它是<li>，你必须让父包装器是<ul>。
但是IE不能在<tr>这样的元素上写innerHTML，所以如果你有一个<td>，你必须把整个HTML字符串包装在<table><tbody><tr>…</tr></tbody></table>，将其写入innerHTML并从几个级别下提取实际的<td>。
看看John Resig的纯JavaScript HTML解析器。
编辑:如果你想让浏览器为你解析HTML, innerHTML正是你想要的。从这个SO问题中:
var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
你可以这样做:
String.prototype.toDOM=function(){
var d=document
,i
,a=d.createElement("div")
,b=d.createDocumentFragment();
a.innerHTML=this;
while(i=a.firstChild)b.appendChild(i);
return b;
};
var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);
为什么不使用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
