Anhängen einer HTML-Zeichenfolge an das DOM

Ist das akzeptabel?

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

jsFiddle .

Aber, Neils Antwort ist eine bessere Lösung.

Die Idee ist, innerHTML für ein Zwischenelement zu verwenden und dann alle untergeordneten Knoten mit appendChild dahin zu verschieben, wo Sie sie wirklich haben möchten.

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);
}

Dadurch wird vermieden, dass Event-Handler für div#test gelöscht werden, Sie können jedoch weiterhin eine HTML-Zeichenfolge anhängen.

Hier ist ein Leistungstest:

Umgebung einrichten (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 -bisschen)

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

Zusammenfassung

AppendChild (E) ist mehr als 2x schneller als andere Lösungen auf chrome und safari, insertAdjacentHTML (F) ist am schnellsten auf firefox. Der innerHTML= (B) (nicht verwechseln mit +=) Ist die zweitschnelle Lösung in allen Browsern und viel praktischer als E und F. Sie können den Test in Ihrem Computer wiederholen 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>

Der richtige Weg ist insertAdjacentHTML. In Firefox vor 8 können Sie auf Range.createContextualFragment zurückgreifen, wenn str keine script-Tags enthält.

Wenn Ihr strscript-Tags enthält, müssen Sie script-Elemente aus dem von createContextualFragment zurückgegebenen Fragment entfernen, bevor Sie das Fragment einfügen. Andernfalls werden die Skripts ausgeführt. (insertAdjacentHTML kennzeichnet Skripte als nicht ausführbar.)

Warum ist das nicht akzeptabel?

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

wäre das Lehrbuch Weg, um es zu tun.

Schnell Hack:

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

Anwendungsfälle:

1: Speichern Sie die Datei als .html-Datei und führen Sie sie in Chrome, Firefox oder Edge aus. (IE funktioniert nicht)

2: Verwendung in http://js.do

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

Mit Kommentar aufgeschlüsselt:

<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 Autovervollständigung
2. Vertikaler Monitor freundlich

Console.log-Meldungen werden jedoch nicht angezeigt . Kam hier auf der Suche nach einer schnellen Lösung . Ich möchte nur die Ergebnisse von Ein paar Zeilen Scratchpad-Code sehen viel Arbeit.

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

nur Text1 wird angezeigt

Was ist mit diesem:

fügt innerHTML ein spezielles Tag hinzu, indem das untergeordnete Element angehängt wird und anschließend das äußere HTML bearbeitet wird, indem das von uns erstellte Tag gelöscht wird. Ich weiß nicht, wie schlau es ist, aber es funktioniert für mich Oder Sie könnten äußereHTML in innerHTML umwandeln, damit sie keine Funktion ersetzen 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>