有没有一种方法可以将类似以下的HTML转换为：
<div>
<a href="#"></a>
<span></span>
</div>
如何将任何其他 HTML 字符串转换为 DOM 元素？（这样我就可以使用 appendChild() 了）。我知道可以使用 .innerHTML 和 .innerText，但那不是我想要的--我真的想能够将动态 HTML 字符串转换为 DOM 元素，以便我可以在 .appendChild() 中传递它。
更新：似乎有些混淆。我在 JavaScript 中有一个变量值作为字符串的HTML内容。文档中没有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="#">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;
some string at the start <div><a href="#">anchor text</a><span>inner text</span></div>string end，该怎么办？ - Ari为什么不使用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
可以查看John Resig的纯JavaScript HTML解析器
编辑：如果您想让浏览器为您解析HTML，innerHTML正是您想要的。来自这个SO问题：
var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
htmlString 中包含 <tr>...</tr>，它将无法正常工作 :( - Aikon Mogwai好的，我自己想明白了答案，这是在思考其他人的回答之后得出的。: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);
这里有一段非常有用的代码。
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();
String和HTMLElement的原型(通常你不应该这样做)。这是无关紧要的，甚至有点危险... - aendratoDomElement返回wrapper.firstChild和返回df.addChilds(wrapper.children)有什么区别？ - Tamil Vendhan Kanagarasu只需为元素提供一个id并正常处理即可，例如：
<div id="dv">
<a href="#"></a>
<span></span>
</div>
现在你可以这样做：
var div = document.getElementById('dv');
div.appendChild(......);
或者使用jQuery：
$('#dv').get(0).appendChild(........);
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);
function txtToElem(txt){
let a = document.createElement('div')
a.style.display='none'
document.body.appendChild(a)
a.innerHTML=txt
let b = a.children
document.body.removeChild(a)
return b
}
let htmltext='<span>hello sir</span>'
console.log(txtToElem(htmltext))
//testing that it works as an elem:
document.body.appendChild(txtToElem(htmltext)[0])<h1>the rest of the website...</h1>或者，您还可以在将HTML转换为字符串时对其进行包装，使用以下方法：
JSON.stringify()
以后当您想要从HTML字符串中解包HTML时，请使用
JSON.parse()
var stringToHTML = function (str) { var dom = document.createElement('div'); dom.innerHTML = str; return dom; };- La pach'