☰

純粋なJavaScript（jQueryなし）のみを使用して、プレーンテキストHTMLからDOMに要素を追加する 質問する

tag-icon • tag-icon javascript html dom
純粋なJavaScript（jQueryなし）のみを使用して、プレーンテキストHTMLからDOMに要素を追加する 質問する

任意の数のタグ、属性などを含む HTML の生のテキスト文字列が与えられた場合に、ページに要素を追加できるようにする必要があります。理想的には、整形式の 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 までの下位互換性が必要です。どんな助けでも大歓迎です。

ベストアンサー1

割り当ててみてくださいinnerHTML財産匿名要素のそれぞれに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.

おすすめ記事