DOMにHTML文字列を追加する

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

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

'test'DOMにあるID を持つDIVに？

（Btw div.innerHTML += str;は受け入れられません。）

使用して、insertAdjacentHTMLそれが利用可能だと、そうでない場合は、フォールバックのいくつかの並べ替えを使用します。insertAdjacentHTML は、現在のすべてのブラウザでサポートされています。

div.insertAdjacentHTML( 'beforeend', str );

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

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

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

jsFiddle。

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

パフォーマンス

AppendChild（E）はchromeおよびsafariの他のソリューションよりも2倍以上高速insertAdjacentHTMLです。（F）はFirefoxで最も高速です。innerHTML=（B）（でない混同ん+=）A（）は、すべてのブラウザ上の第二高速なソリューションであり、EとFのよりもはるかに便利です

細部

セットアップ環境（2019.07.10）MacOs High Sierra 10.13.4 on Chrome 75.0.3770（64-bit）、Safari 11.1.0（13604.5.6）、Firefox 67.0.0（64-bit）

• Chrome E（140kオペレーション/秒）が最速、B（47k）とF（46k）が秒、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）です。

ここでマシンのテストを再生できます

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>

アイデアは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の文字列を追加できます。

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

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

クイックハック：

<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メッセージは表示されません。迅速な解決策を探してここに来ました。ほんの数行のスクラッチパッドコードの結果を確認したいだけですが、他の解決策はあまりにも働きすぎです。

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

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

それを行うための教科書的な方法でしょう。

これで解決できます

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

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

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

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

text1のみが表示されます

これはどうですか：

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

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>

最短 -18文字（混同しないでください+=（OPによるメンション）、=詳細はこちら）

test.innerHTML=str

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

test.innerHTML=str

<div id="test"></div>