转换HTML字符串到DOM元素?

是否有一种方法可以像这样转换HTML:

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

或任何其他HTML字符串到DOM元素?(这样我就可以使用appendChild())。我知道我可以做. innerhtml和. innertext，但这不是我想要的——我实际上希望能够将动态HTML字符串转换为DOM元素，以便我可以在. appendchild()中传递它。

更新:似乎有些混乱。我有一个字符串的HTML内容，作为JavaScript变量的值。文档中没有HTML内容。

526947 次浏览
小开

只需要给元素一个id并正常处理它，例如:

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

现在你可以这样做:

var div = document.getElementById('dv');
div.appendChild(......);

或者使用jQuery:

$('#dv').get(0).appendChild(........);
小开

看看John Resig的纯JavaScript HTML解析器。

编辑:如果你想让浏览器为你解析HTML， innerHTML正是你想要的。从这个SO问题:

var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
小开
最佳答案

你可以像这样使用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

小开

你通常创建一个临时的父元素，你可以写入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>。

小开

好吧，在我思考了其他人的答案之后，我自己想到了答案。: 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);
小开

你可以这样做:

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
小开

这里有一些有用的代码。

var uiHelper = function () {


var htmls = {};


var getHTML = function (url) {
/// <summary>Returns HTML in a string format</summary>
/// <param name="url" type="string">The url to the file with the HTML</param>


if (!htmls[url])
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, false);
xmlhttp.send();
htmls[url] = xmlhttp.responseText;
};
return htmls[url];
};


return {
getHTML: getHTML
};
}();

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

String.prototype.toDomElement = function () {


var wrapper = document.createElement('div');
wrapper.innerHTML = this;
var df= document.createDocumentFragment();
return df.addChilds(wrapper.children);
};

——原型辅助

HTMLElement.prototype.addChilds = function (newChilds) {
/// <summary>Add an array of child elements</summary>
/// <param name="newChilds" type="Array">Array of HTMLElements to add to this HTMLElement</param>
/// <returns type="this" />
for (var i = 0; i < newChilds.length; i += 1) { this.appendChild(newChilds[i]); };
return this;
};

——使用

 thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();
小开

或者，你也可以在html被转换为字符串时使用，

JSON.stringify()

稍后，当您想从HTML字符串中展开HTML时，使用

JSON.parse()

提交答案