Aggiunta di una stringa HTML al DOM

Come aggiungere questa stringa HTML

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

al DIV con l'ID 'test'che è nel DOM?

(Btw div.innerHTML += str;non è accettabile.)

Usa insertAdjacentHTMLse è disponibile, altrimenti usa una sorta di fallback. insertAdjacentHTML è supportato in tutti i browser correnti .

div.insertAdjacentHTML( 'beforeend', str );

Demo dal vivo: http://jsfiddle.net/euQ5n/

È accettabile?

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

jsFiddle .

Ma , la risposta di Neil è una soluzione migliore.

Prestazione

AppendChild(E) è più di 2 volte più veloce di altre soluzioni su Chrome e Safari, insertAdjacentHTML(F) è più veloce su Firefox. La innerHTML=(B) (da non confondere con +=(A)) è la seconda soluzione veloce su tutti i browser ed è molto più utile di E ed F.

Dettagli

Configurazione dell'ambiente (2019.07.10) MacOs High Sierra 10.13.4 su Chrome 75.0.3770 (64 bit), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64 bit)

• su Chrome E (140.000 operazioni al secondo) è il più veloce, B (47.000) e F (46.000) sono i secondi, A (332) è il più lento
• su firefox F (94k) è il più veloce, quindi B (80k), D (73k), E (64k), C (21k) il più lento è A (466)
• su Safari E (207k) è il più veloce, quindi B (89k), F (88k), D (83k), C (25k), il più lento è A (509)

Puoi riprodurre il test nella tua macchina qui

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>

L'idea è di utilizzare innerHTMLun elemento intermedio e quindi spostare tutti i suoi nodi figlio dove li vuoi veramente 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);
}

Ciò evita di cancellare tutti i gestori di eventi div#testma consente comunque di aggiungere una stringa di HTML.

Il modo giusto è usare insertAdjacentHTML. In Firefox precedente a 8, puoi tornare a utilizzare Range.createContextualFragmentse strnon contiene scripttag.

Se i tag strcontiene script, è necessario rimuovere gli scriptelementi dal frammento restituito da createContextualFragmentprima di inserire il frammento. Altrimenti, gli script verranno eseguiti. ( insertAdjacentHTMLcontrassegna gli script come non eseguibili.)

Hack rapido :

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

Casi d'uso :

1: salva come file .html ed esegui in chrome, firefox o edge. (IE non funzionerà)

2: utilizzare in http://js.do

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

Suddiviso con commenti:

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

Motivo per cui ho pubblicato:

JS.do ha due must have:

1. Nessun completamento automatico
2. Compatibile con il monitor verticale

Ma non mostra i messaggi console.log. Sono venuto qui cercando una soluzione rapida. Voglio solo vedere i risultati di poche righe di codice per appunti, le altre soluzioni sono troppo impegnative.

Perché non è accettabile?

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

sarebbe il modo da manuale di farlo.

Questo può risolvere

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

InnerHTML cancella tutti i dati come eventi per i nodi esistenti

aggiungi figlio con firstChild aggiunge solo il primo figlio a innerHTML. Ad esempio, se dobbiamo aggiungere:

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

solo text1 verrà visualizzato

Che dire di questo:

aggiunge un tag speciale a innerHTML accodando il figlio e quindi modifica outerHTML eliminando il tag che abbiamo creato. Non so quanto sia intelligente ma per me funziona o potresti cambiare outerHTML in innerHTML in modo che non debba usare la funzione di sostituzione

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>

Più breve - 18 caratteri (non confondere +=(menzione da OP) con =maggiori dettagli qui )

test.innerHTML=str

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

test.innerHTML=str

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