首页 文章

将HTML字符串转换为DOM元素？ [重复]

提问于
浏览 次
153

这个问题在这里已有答案：

有没有办法转换HTML像：

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

或任何其他HTML字符串到DOM元素？ （这样我就可以使用appendChild（））了 . 我知道我可以做.innerHTML和.innerText，但这不是我想要的 - 我真的希望能够将动态HTML字符串转换为DOM元素，以便我可以在.appendChild（）中传递它 .

更新：似乎有困惑 . 我有一个字符串中的HTML内容，作为JavaScript中变量的值 . 文档中没有HTML内容 .

javascript html dom

8 回答

  • 14

    您可以使用 DOMParser ，如下所示：

    var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
    doc = new DOMParser().parseFromString(xmlString, "text/xml");
    console.log(doc.firstChild.innerHTML); // => <div id="foo">...
    console.log(doc.firstChild.firstChild.innerHTML); // => <a href="#">...
    回复于
  • 1

    您通常创建一个临时父元素，您可以将 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> 下 .

    回复于
  • 37

    为什么不使用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
    回复于
  • 1

    看看John Resig的pure JavaScript HTML parser .

    编辑：如果您希望浏览器为您解析HTML， innerHTML 正是您想要的 . 来自this SO question：

    var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
    回复于
  • 2

    好吧，在我不得不考虑其他人的答案之后，我自己意识到了答案 . ：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);
    回复于
  • 171

    这是一个有用的小代码 .

    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
        };
}();

    --Convert the HTML string into a DOM Element

    String.prototype.toDomElement = function () {

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

    --prototype helper

    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;
};

    --Usage

    thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();
    回复于
  • 4

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

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

    现在你可以这样做：

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

    或者使用jQuery：

    $('#dv').get(0).appendChild(........);
    回复于
  • 250

    你可以这样做：

    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);
    回复于

相关问题