59

任意の数のタグ、属性などを含む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までの下位互換性が必要です。どんな助けでも巨大になるでしょう。

4

5 に答える 5

81

匿名要素の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.
于 2012-04-25T05:14:24.037 に答える
25

あなたが使用することができますinsertAdjacentHTML：

document.body.insertAdjacentHTML("beforeend", theHTMLToInsert);

以外のオプションもありますbeforeendが、要素に追加したいようですbeforeend。

実例：

document.body.insertAdjacentHTML("beforeend", "<div>This is the new content.</div>");
<div>Existing content in <code>body</code>.</div>

+=で使用する場合とは異なりinnerHTML、これでは、ブラウザが要素のコンテンツをスピンして、それを表すHTML文字列を作成し、それらの要素（それらにあるイベントハンドラを含む）を破棄し、同じ要素に置き換える必要はありません。あなたの追加。追加を追加するだけで、既存のコンテンツは変更されません。

于 2018-07-19T21:46:27.610 に答える
14 
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);

シャウドワーク（フィドル：http ：//jsfiddle.net/gWHVy/ ）

編集： これは、挿入したいものの直接の子のプロパティを知っているという特殊なケースの解決策です。一般的なケースで機能するアーロンのソリューションを見てみましょう。

于 2012-04-25T05:18:17.637 に答える
8

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

document.getElementById("body").innerHTML = "<h1 id='title'>Some Title</h1><span>test</span>";
于 2012-04-25T05:14:17.490 に答える
3

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]);
  }
}
于 2012-08-20T18:08:40.290 に答える