将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已准备就绪。 玩的开心….