Anhängen einer HTML-Zeichenfolge an das DOM

Question 1

So hängen Sie einen HTML-String wie z

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

zum <div> mit der ID test?

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

Question 2

Verwenden insertAdjacentHTML welcher wird in allen aktuellen Browsern unterstützt:

div.insertAdjacentHTML( 'beforeend', str );

Der Positionsparameter beforeend fügt innerhalb des Elements nach seinem letzten Kind hinzu.

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

Question 3

Leistung

AppendChild (E) ist mehr als 2x schneller als andere Lösungen auf Chrome und Safari, insertAdjacentHTML(F) ist am schnellsten auf Firefox. Die innerHTML= (B) (nicht verwechseln mit += (A)) ist die zweitschnellste Lösung für alle Browser 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)

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

Sie können den Test auf 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>

Question 4

Ist das akzeptabel?

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

jsFiddle.

AberNeils Antwort ist eine bessere Lösung.

Question 5

Die Idee ist zu verwenden innerHTML auf einem Zwischenelement und verschieben Sie dann alle untergeordneten Knoten dorthin, wo Sie sie wirklich haben 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);
}

Dadurch wird vermieden, dass Event-Handler gelöscht werden div#test erlaubt Ihnen aber trotzdem, einen HTML-String anzuhängen.

Question 6

Der richtige Weg ist die Nutzung insertAdjacentHTML. In Firefox vor Version 8 können Sie auf die Verwendung zurückgreifen Range.createContextualFragment wenn dein str enthält Nr script Stichworte.

Wenn dein str enthält script Tags, müssen Sie entfernen script Elemente aus dem von zurückgegebenen Fragment createContextualFragment vor dem Einfügen des Fragments. Andernfalls werden die Skripts ausgeführt. (insertAdjacentHTML markiert Skripte als nicht ausführbar.)

Question 7

Schnell Hacken:

<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 funktioniert nicht)

2: Verwendung 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:

Keine automatische Vervollständigung
Vertikaler Monitor freundlich

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

Question 8

Warum ist das nicht akzeptabel?

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

wäre die Lehrbuchmethode.