Anhängen einer HTML-Zeichenfolge an das DOM

So hängen Sie diese HTML-Zeichenfolge an

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

zum DIV mit der ID, 'test'die sich im DOM befindet?

(Übrigens div.innerHTML += str;ist nicht akzeptabel.)

Verwenden Sie, insertAdjacentHTMLwenn es verfügbar ist, andernfalls verwenden Sie eine Art Fallback. insertAdjacentHTML wird in allen aktuellen Browsern unterstützt .

div.insertAdjacentHTML( 'beforeend', str );

Live-Demo: http://jsfiddle.net/euQ5n/

Ist das akzeptabel?

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

jsFiddle .

Aber , Neil Antwort ist eine bessere Lösung.

Performance

AppendChild(E) ist mehr als 2x schneller als andere Lösungen auf Chrom und Safari, insertAdjacentHTML(F) ist auf Firefox am schnellsten. Das innerHTML=(B) (nicht mit +=(A) verwechseln ) ist die zweitschnelle Lösung in allen Browsern und viel praktischer als E und F.

Einzelheiten

Einrichtungsumgebung (2019.07.10) MacOs High Sierra 10.13.4 auf Chrome 75.0.3770 (64-Bit), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64-Bit)

• Bei Chrome E ist (140.000 Operationen pro Sekunde) am schnellsten, B (47.000) und F (46.000) an zweiter Stelle, A (332) am langsamsten
• auf Firefox ist F (94k) am schnellsten, dann ist B (80k), D (73k), E (64k), C (21k) am langsamsten A (466)
• auf Safari ist E (207k) am schnellsten, dann B (89k), F (88k), D (83k), C (25k), am langsamsten ist A (509)

Sie können Test in Ihrem Gerät abspielen hier

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>

Die Idee ist, innerHTMLein Zwischenelement zu verwenden und dann alle untergeordneten Knoten an die Stelle zu verschieben, über die Sie sie wirklich möchten 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);
}

Auf diese Weise wird vermieden, dass Ereignishandler gelöscht werden div#test, Sie können jedoch eine HTML-Zeichenfolge anhängen.

Der richtige Weg ist mit insertAdjacentHTML. In Firefox vor 8 können Sie auf die Verwendung zurückgreifen, Range.createContextualFragmentwenn Ihre strkeine scriptTags enthält .

Wenn Ihr Tag Tags strenthält script, müssen Sie scriptElemente aus dem von zurückgegebenen Fragment entfernen, createContextualFragmentbevor Sie das Fragment einfügen. Andernfalls werden die Skripte ausgeführt. ( insertAdjacentHTMLMarkiert Skripte als nicht ausführbar.)

Schneller Hack :

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

Anwendungsfälle :

1: Als HTML-Datei speichern und in Chrome, Firefox oder Edge ausführen. (IE wird nicht funktionieren)

2: Verwenden Sie in http://js.do

In Aktion: http://js.do/HeavyMetalCookies/quick_hack

Aufgeschlüsselt mit Kommentaren:

<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>

Grund warum ich gepostet habe:

JS.do hat zwei Must-Haves:

1. Keine automatische Vervollständigung
2. Vertikaler Monitor freundlich

Zeigt jedoch keine console.log-Nachrichten an. Kam hierher auf der Suche nach einer schnellen Lösung. Ich möchte nur die Ergebnisse einiger Zeilen Scratchpad-Code sehen, die anderen Lösungen sind zu viel Arbeit.

Warum ist das nicht akzeptabel?

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

wäre das Lehrbuch, wie man es macht.

Dies kann lösen

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

InnerHTML löscht alle Daten wie Ereignisse für vorhandene Knoten

Kind mit firstChild anhängen fügt innerHTML nur das erste Kind hinzu. Zum Beispiel, wenn wir anhängen müssen:

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

Es wird nur Text1 angezeigt

Was ist damit:

Fügt innerHTML ein spezielles Tag hinzu, indem Sie ein Kind anhängen, und bearbeiten Sie dann OuterHTML, indem Sie das von uns erstellte Tag löschen. Ich weiß nicht, wie schlau es ist, aber es funktioniert für mich, oder Sie können OuterHTML in InnerHTML ändern, sodass keine Funktion zum Ersetzen verwendet werden muss

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>

Kürzeste - 18 Zeichen (nicht zu verwechseln +=(Erwähnung durch OP) mit =weiteren Details hier )

test.innerHTML=str

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

test.innerHTML=str

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