web-dev-qa-db-ja.com

DOMへのHTML文字列の追加

このHTML文字列を追加する方法

var str = '<p>Just some <span>text</span> here</p>';

dOMにあるID 'test'のDIVに？

（ところでdiv.innerHTML += str;は受け入れられません。）

javascripthtmldombrowser
96
Šime Vidas

使用可能な場合は insertAdjacentHTML を使用し、そうでない場合は何らかのフォールバックを使用します。 insertAdjacentHTML 現在のすべてのブラウザでサポートされています 。

div.insertAdjacentHTML( 'beforeend', str );

ライブデモ：http://jsfiddle.net/euQ5n/

199
Neil

これは受け入れられますか？

var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);

jsFiddle 。

しかし、、 ニールの答え はより良い解決策です。

15
alex

アイデアは、中間要素でinnerHTMLを使用し、appendChildを介してそのすべての子ノードを本当に必要な場所に移動することです。

var target = document.getElementById('test');
var str = '<p>Just some <span>text</span> here</p>';

var temp = document.createElement('div');
temp.innerHTML = str;
while (temp.firstChild) {
  target.appendChild(temp.firstChild);
}

これにより、div#testのイベントハンドラーを完全に消去することはできませんが、HTMLの文字列を追加できます。

9
Chris Calo

以下にパフォーマンステストを示します。

環境のセットアップ（2019.07.10）Chrome 75.0.3770（64ビット）、Safari 11.1.0（13604.5.6）、Firefox 67.0.0（64ビット）上のMacOs High Sierra 10.13.4

enter image description here

  • Chrome E（1秒あたり140k操作）が最も速く、B（47k）およびF（46k）が2番目、A（332）が最も遅い
  • firefoxでは、F（94k）が最も速く、次にB（80k）、D（73k）、E（64k）、C（21k）が最も遅くA（466）
  • safariではE(207k)が最も速く、次にB（89k）、F（88k）、D（83k）、C（25k）、最も遅いのはA（509）です

概要

AppendChild（E）は、chromeおよびsafariの他のソリューションより2倍以上高速です。insertAdjacentHTML（F）は、firefoxで最速です。 innerHTML=（B）（+=と混同しないでください）は、すべてのブラウザーで2番目に高速なソリューションであり、EおよびFよりもはるかに便利です。マシンでテストを再生できます ここで

function A() {    
  container.innerHTML += '<p>A: Just some <span>text</span> here</p>';
}

function B() {    
  container.innerHTML = '<p>B: Just some <span>text</span> here</p>';
}

function C() {    
  $('#container').append('<p>C: Just some <span>text</span> here</p>');
}

function D() {
  var p = document.createElement("p");
  p.innerHTML = 'D: Just some <span>text</span> here';
  container.appendChild(p);
}

function E() {    
  var p = document.createElement("p");
  var s = document.createElement("span"); 
  s.appendChild( document.createTextNode("text ") );
  p.appendChild( document.createTextNode("E: Just some ") );
  p.appendChild( s );
  p.appendChild( document.createTextNode(" here") );
  container.appendChild(p);
}

function F() {    
  container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>');
}

A();
B();
C();
D();
E();
F();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This snippet only for show code used in test (in jsperf.com) - it not perform test itself. 
<div id="container"></div>
7
Kamil Kiełczewski

正しい方法はinsertAdjacentHTMLを使用することです。 8より前のFirefoxでは、strにscriptタグが含まれていない場合、Range.createContextualFragmentの使用にフォールバックできます。

strにscriptタグが含まれる場合、フラグメントを挿入する前に、scriptによって返されるフラグメントからcreateContextualFragment要素を削除する必要があります。それ以外の場合、スクリプトが実行されます。 （insertAdjacentHTMLは、スクリプトを実行不能としてマークします。）

3
hsivonen

なぜそれが受け入れられないのですか？

document.getElementById('test').innerHTML += str

それを行う教科書の方法になります。

1
Nick Brunt

クイックハック：

<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>

ユースケース：

1：.htmlファイルとして保存し、chromeまたはfirefoxまたはEdgeで実行します。 （IEは動作しません）

2： http://js.do で使用

動作中：http://js.do/HeavyMetalCookies/quick_hack

コメント付きで破壊：

<script>

//: The message "QUICK_HACK" 
//: wrapped in a header #1 tag.
var text = "<h1>QUICK_HACK</h1>";

//: It's a quick hack, so I don't
//: care where it goes on the document,
//: just as long as I can see it.
//: Since I am doing this quick hack in
//: an empty file or scratchpad, 
//: it should be visible.
var child = document.children[0];

//: Set the html content of your child
//: to the message you want to see on screen.
child.innerHTML = text;

</script>

投稿した理由：

JS.doには2つの必須アイテムがあります。

  1. オートコンプリートなし
  2. 縦型モニターに優しい

ただし、console.logメッセージは表示されません。簡単な解決策を探してここに来ました。数行のスクラッチパッドコードの結果を確認したいだけで、他のソリューションでは手間がかかります。

1
J.M.I. MADISON

これは解決できます

 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>');
0
Rafael Senne

InnerHTMLは、既存のノードのイベントなどのすべてのデータをクリアします

firstChildで子を追加すると、innerHTMLに最初の子のみが追加されます。たとえば、追加する必要がある場合：

 <p>text1</p><p>text2</p>

text1のみが表示されます

これはどうですか：

子を追加してinnerHTMLに特別なタグを追加し、作成したタグを削除してouterHTMLを編集します。それがどれほどスマートかわからないが、私にとってはうまくいくか、outerHTMLをinnerHTMLに変更するので、関数replaceを使用する必要はありません

function append(element, str)
{

  var child = document.createElement('someshittyuniquetag');
                
  child.innerHTML = str;

  element.appendChild(child);

  child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, '');

// or Even child.outerHTML = child.innerHTML


  
}
<div id="testit">
This text is inside the div
<button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button>
<button onclick="append(this, 'some text')">to this</button>
</div>
0
Łukasz Szpak