Ajouter une chaîne HTML au DOM

Question

Comment ajouter une chaîne HTML telle que

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

au <div> avec l'id test ?

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

Answer 1

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.

Answer 2

L'idée est d'utiliser innerHTML sur 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#test mais vous permet toujours d'ajouter une chaîne de code HTML.

Answer 3

La bonne méthode consiste à utiliser insertAdjacentHTML . Dans Firefox antérieur à 8, vous pouvez revenir à l'utilisation de Range.createContextualFragment si votre str ne contient pas de balises script

Si votre str contient des script , vous devez supprimer les éléments script du fragment renvoyé par createContextualFragment avant d'insérer le fragment. Sinon, les scripts s'exécuteront. ( insertAdjacentHTML marque les scripts comme non exécutables.)