純粋なJavaScript（jQueryなし）のみを使用してプレーンテキストHTMLを与えられたDOMに要素を追加

Question

任意の数のタグや属性などを含む生のテキスト文字列を与えられたページに要素を追加できる必要があります。適切に構成されたhtmlの任意の文字列のような何かをすることができるようにしたいと思います。

var theElement = document.createElement("<h1 id='title'>Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>"); 

document.getElementById("body").appendChild(theElement); 

明らかに、それは動作しません、私は同じ結果を達成するための良い方法を探しています。可能であれば、HTMLの解析を避けたいと思います。私は使用できるツールに厳しく制限されていますが、jQueryや外部は含まれておらず、クロスブラウザでなければならず、IE6にも下位互換性がなければなりません。どんな助けも大きなものになるでしょう。

Answer 1

匿名要素のinnerHTML propertyに割り当て、そのchildrenのそれぞれを追加してみてください。

function appendHtml(el, str) { 
    var div = document.createElement('div'); 
    div.innerHTML = str; 
    while (div.children.length > 0) { 
    el.appendChild(div.children[0]); 
    } 
} 
var html = '<h1 id="title">Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>'; 
appendHtml(document.body, html); // "body" has two more children - h1 and span. 

Answer 2

HTMLを挿入する要素のelementIdを取得し、HTMLを追加するためにinnerHTMLを使用できます。

document.getElementById("body").innerHTML = "<h1 id='title'>Some Title</h1><span>test</span>"; 

Answer 3

var el = document.createElement("h1") 
el.id="title"; 
el.innerHTML = "Some title"; 
document.body.appendChild(el); 

var el2 = document.createElement("span") 
el2.style.display="block"; 
el2.style.width="100%"; 
el2.innerHTML = "Some arb text"; 
document.body.appendChild(el2); 

仕事Shoud（フィドル：http://jsfiddle.net/gWHVy/）

Answer 4

maericsソリューションは、すぐに私の問題を修正しました。しかし、私は必要なことをするためにそれをすばやく調整する必要がありました。 私はいくつかのスクリプトとスタイルシートをクリックして読み込みます。実際のオブジェクトとしてスクリプトやスタイルシートをDOMのポストロードに追加することはできません。例えばdocument.bodyにinnerHTMLを設定して、<link rel="stylesheet" />の部分を入れると、それはテキストのみを出力し、ブラウザはそれをリンクオブジェクトとして認識しません。これを修正するために、次のコードを使用しました。

function appendHtml(el, str) { 
    var div = document.createElement('div'); 
    div.innerHTML = str; 
    while (div.children.length > 0) { 
     if (div.children[0].tagName == 'LINK') { 
      // Create an actual link element to append later 
      style = document.createElement('link'); 
      style.href = div.children[0].href; 
      // append your other things like rel, type, etc 
      el.appendChild(style); 
     } 
     el.appendChild(div.children[0]); 
    } 
}