web-dev-qa-db-ja.com

HTML文字列をDOM要素に変換する

HTMLを変換する方法はありますか？

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

またはDOM要素に他のHTML文字列？ （私はappendChild（）を使うことができるように）。私は.innerHTMLと.innerTextを実行できることを知っていますが、それは私が望んでいることではありません - 私は文字通り.appendChild（）でそれを渡すことができるようにDOM要素に変換できるようにしたいです。

更新：混乱があるようです。 JavaScriptの変数の値として、HTMLコンテンツを文字列で持っています。文書にHTMLコンテンツがありません。

javascripthtmldom
166
Tower

以下のように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="#">...
280
maerics

通常は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>を持っていたらあなたは<table><tbody><tr>...</tr></tbody></table>で全体のHTML文字列をラップしなければならないでしょう、それをinnerHTMLに変換して、実際に必要な実際の<td>をいくつかのレベルから除外します。

181
bobince

なぜ使わないのですか 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
38
Ram

John Resigの pure JavaScript HTML parser を調べてください。

編集：あなたがブラウザにHTMLを解析させたいのなら、innerHTMLはまさにあなたが望むものです。から this SO question ：

var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
14
orip

さて、私は他の人々の答えについて考えなければならなかった後、私は自分自身で答えを理解しました。 ：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);
4
Tower

これは便利な小さなコードです。

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

- Usage

 thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();
2
Filling The Stack is What I DO

あなたはこれのようにそれをすることができます：

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);
1
william malo

要素にidを与えて通常通りに処理するだけです。

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

今、あなたは好きにすることができます：

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

あるいはjQueryを使うと：

$('#dv').get(0).appendChild(........);
1
Sarfraz