Ajout d'une chaîne HTML au DOM

Comment ajouter cette chaîne HTML

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

au DIV avec l'ID 'test'qui se trouve dans le DOM?

(Btw div.innerHTML += str;n'est pas acceptable.)

Utilisez-le insertAdjacentHTMLs'il est disponible, sinon utilisez une sorte de solution de secours. insertAdjacentHTML est pris en charge dans tous les navigateurs actuels .

div.insertAdjacentHTML( 'beforeend', str );

Démo en direct: http://jsfiddle.net/euQ5n/

Est-ce acceptable?

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

jsFiddle .

Mais , la réponse de Neil est une meilleure solution.

Performance

AppendChild(E) est plus de 2x plus rapide que les autres solutions sur Chrome et Safari, insertAdjacentHTML(F) est plus rapide sur Firefox. Le innerHTML=(B) (ne pas confondre avec+= (A)) est la deuxième solution rapide sur tous les navigateurs et il est beaucoup plus pratique que E et F.

Détails

Configuration de l'environnement (2019.07.10) MacOs High Sierra 10.13.4 sur Chrome 75.0.3770 (64 bits), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64 bits)

• sur Chrome E (140k opérations par seconde) est le plus rapide, B (47k) et F (46k) sont les seconds, A (332) est le plus lent
• sur firefox F (94k) est le plus rapide, puis B (80k), D (73k), E (64k), C (21k) le plus lent est A (466)
• sur Safari E (207k) est le plus rapide, puis B (89k), F (88k), D (83k), C (25k), le plus lent est A (509)

Vous pouvez rejouer le test sur votre machine ici

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'idée est d'utiliser innerHTMLsur un élément intermédiaire, puis de déplacer tous ses nœuds enfants là où vous le souhaitez vraiment via 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);
}

Cela évite d'effacer les gestionnaires d'événements sur div#testmais vous permet toujours d'ajouter une chaîne de HTML.

La bonne façon est d'utiliser insertAdjacentHTML. Dans Firefox antérieur à 8, vous pouvez revenir à l'utilisation Range.createContextualFragmentsi votre strne contient aucune scriptbalise.

Si votre strcontient des scriptbalises, vous devez supprimer des scriptéléments du fragment renvoyé par createContextualFragmentavant d'insérer le fragment. Sinon, les scripts s'exécuteront. ( insertAdjacentHTMLmarque les scripts comme non exécutables.)

Hack rapide :

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

Cas d'utilisation :

1: Enregistrez en tant que fichier .html et exécutez-le dans Chrome, Firefox ou Edge. (IE ne fonctionnera pas)

2: Utilisation dans http://js.do

En action: http://js.do/HeavyMetalCookies/quick_hack

Décomposé avec des commentaires:

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

Raison pour laquelle j'ai publié:

JS.do a deux incontournables:

1. Pas de saisie semi-automatique
2. Compatible moniteur vertical

Mais n'affiche pas les messages console.log. Je suis venu ici à la recherche d'une solution rapide. Je veux juste voir les résultats de quelques lignes de code de bloc-notes, les autres solutions sont trop de travail.

Pourquoi n'est-ce pas acceptable?

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

serait la manière classique de le faire.

Cela peut résoudre

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

InnerHTML efface toutes les données comme l'événement pour les nœuds existants

append child avec firstChild ajoute uniquement le premier enfant à innerHTML. Par exemple si nous devons ajouter:

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

seul text1 apparaîtra

Et ça:

ajoute une balise spéciale à innerHTML en ajoutant un enfant, puis modifiez externalHTML en supprimant la balise que nous avons créée. Je ne sais pas à quel point c'est intelligent mais cela fonctionne pour moi ou vous pourriez changer externalHTML en innerHTML afin qu'il n'ait pas à utiliser la fonction de remplacement

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>

Le plus court - 18 caractères (à ne pas confondre +=(mention par OP) avec =plus de détails ici )

test.innerHTML=str

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

test.innerHTML=str

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