将HTMLstring转换为DOM元素？
有没有一种方法来转换HTML：
<div> <a href="#"></a> <span></span> </div> 或任何其他的HTMLstring到DOM元素？ （所以我可以使用appendChild（））。 我知道我可以做.innerHTML和.innerText，但这不是我想要的 – 我从字面上想要将dynamicHTMLstring转换为DOM元素，以便我可以将它传递给.appendChild（）。
更新：似乎有混乱。 我有一个string中的HTML内容，作为JavaScript中的一个variables的值。 文档中没有HTML内容。
您可以使用DOMParser ，如下所示：
var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>" , parser = new DOMParser() , doc = parser.parseFromString(xmlString, "text/xml"); doc.firstChild // => <div id="foo">... doc.firstChild.firstChild // => <a href="#">...
您通常会创build一个临时父元素，您可以在其中编写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>你必须将整个HTMLstring包装在<table><tbody><tr> … </tr></tbody></table> ，把它写到innerHTML然后从下面几个级别中parsing出你想要的实际的<td> 。
为什么不使用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 JavaScriptparsing器 。
编辑：如果你想浏览器为你parsingHTML， innerHTML正是你想要的。 从这个SO问题 ：
var tempDiv = document.createElement('div'); tempDiv.innerHTML = htmlString;
好吧，在我想到别人的答案之后，我自己意识到了答案。 ：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 }; }();
– 将HTMLstring转换为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();
只要给元素一个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);
在冲浪时，我发现了一些很棒的在线工具，可以将纯HTML转换为DOM。
我更喜欢这个 。 只需将一些variables名称和函数名称更改为您的首选项，并且DOM已准备就绪。 玩的开心….
