Anexando string HTML ao DOM

Como anexar esta string HTML

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

para o DIV com o ID 'test'que está no DOM?

(Btw div.innerHTML += str;não é aceitável.)

Use insertAdjacentHTMLse estiver disponível, caso contrário, use algum tipo de reserva. insertAdjacentHTML é compatível com todos os navegadores atuais .

div.insertAdjacentHTML( 'beforeend', str );

Demonstração ao vivo: http://jsfiddle.net/euQ5n/

Isso é aceitável?

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

jsFiddle .

Mas , a resposta de Neil é uma solução melhor.

atuação

AppendChild(E) é mais de 2x mais rápido do que outras soluções no Chrome e Safari, insertAdjacentHTML(F) é mais rápido no Firefox. O innerHTML=(B) (não confunda com +=(A)) é a segunda solução rápida em todos os navegadores e é muito mais prático do que E e F.

Detalhes

Ambiente de configuração (10/07/2019) MacOs High Sierra 10.13.4 no Chrome 75.0.3770 (64 bits), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64 bits)

• no Chrome E (140k operações por segundo) é mais rápido, B (47k) e F (46k) são o segundo, A (332) é o mais lento
• no firefox F (94k) é mais rápido, então B (80k), D (73k), E (64k), C (21k) mais lento é A (466)
• no Safari E (207k) é mais rápido, então B (89k), F (88k), D (83k), C (25k), o mais lento é A (509)

Você pode reproduzir o teste em sua máquina aqui

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>

A ideia é usar innerHTMLem um elemento intermediário e, em seguida, mover todos os seus nós filhos para onde você realmente os deseja 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);
}

Isso evita apagar qualquer manipulador de eventos, div#testmas ainda permite que você anexe uma string de HTML.

O jeito certo é usar insertAdjacentHTML. No Firefox anterior ao 8, você pode voltar a usar Range.createContextualFragmentse strnão contiver scripttags.

Se o seu strcontém scripttags, você precisa remover os scriptelementos do fragmento retornado por createContextualFragmentantes de inserir o fragmento. Caso contrário, os scripts serão executados. ( insertAdjacentHTMLmarca os scripts como não executáveis.)

Hack rápido :

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

Casos de uso :

1: Salve como arquivo .html e execute em chrome ou firefox ou edge. (IE não funciona)

2: Use em http://js.do

Em ação: http://js.do/HeavyMetalCookies/quick_hack

Dividido com comentários:

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

Razão pela qual postei:

JS.do tem dois itens obrigatórios:

1. Sem autocomplete
2. Monitor vertical amigável

Mas não mostra mensagens console.log. Vim aqui em busca de uma solução rápida. Eu só quero ver os resultados de algumas linhas de código do scratchpad, as outras soluções dão muito trabalho.

Por que isso não é aceitável?

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

seria a maneira clássica de fazer isso.

Isso pode resolver

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

InnerHTML limpa todos os dados como eventos para nós existentes

anexar filho com firstChild adiciona apenas o primeiro filho a innerHTML. Por exemplo, se tivermos que acrescentar:

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

apenas text1 irá aparecer

Que tal isso:

adiciona tag especial a innerHTML anexando filho e, em seguida, edita outerHTML excluindo a tag que criamos. Não sei o quão inteligente é, mas funciona para mim ou você pode alterar outerHTML para innerHTML para que não precise usar a função substituir

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>

Mais curto - 18 caracteres (não confunda +=(menção por OP) com =mais detalhes aqui )

test.innerHTML=str

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

test.innerHTML=str

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