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

只需给元素一个并正常处理它，例如：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，这正是您想要的。从这个 SO 问题：innerHTML

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不能写这样的元素，所以如果你有一个，你必须把整个HTML字符串包装在...中，把它写到并从几个级别中解救出你想要的实际。innerHTML<tr><td><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();

总结：

1. 制作不可见的元素
2. 将 HTML 添加到
3. 通过获取元素的第一个子元素来获取元素

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>

首先，将 div 附加到文档上，通过使用 css 端口将其隐藏起来。hide

然后，使用 div 将文本附加到不可见的 div 中appendChild()

最后，使用 proporty 获取不可见 div 中的元素Element.children

注意：

替换为 也获取嵌套元素a.childrena.childnodes

缺点：

1. 仅适用于前端应用程序