web-dev-qa-db-fra.com

Ajouter une chaîne HTML au DOM

Comment ajouter cette chaîne HTML

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

à la DIV avec l'ID 'test' qui est dans le DOM?

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

javascripthtmldombrowser
70
Šime Vidas

Utilisez insertAdjacentHTML s'il est disponible, sinon utilisez une sorte de solution de secours. insertAdjacentHTML est pris en charge par tous les navigateurs actuels .

div.insertAdjacentHTML( 'beforeend', str );

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

163
Neil

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.

13
alex

L'idée est d'utiliser innerHTML sur un élément intermédiaire, puis de déplacer tous ses nœuds enfants vers l'emplacement souhaité 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 tous les gestionnaires d'événements sur div#test, mais vous permet néanmoins d'ajouter une chaîne HTML.

8
Chris Calo

La bonne façon utilise insertAdjacentHTML. Dans Firefox antérieur à 8, vous pouvez utiliser Range.createContextualFragment si votre str ne contient pas de balises script.

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

3
hsivonen

Pourquoi est-ce pas acceptable?

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

serait la façon classique de le faire.

1
Nick Brunt

Rapide Hack:

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

Cas d'utilisation:

1: Enregistrer en tant que fichier .html et exécuter en chrome ou firefox ou Edge. (IE ne fonctionnera pas)

2: Utilisation dans http://js.do

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

Décomposé avec 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 posté:

JS.do a deux incontournables:

  1. Non autocomplete
  2. Moniteur vertical

Mais ne montre 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 bloc-notes, les autres solutions sont beaucoup de travail.

1
J.M.I. MADISON

Cela peut résoudre

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

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

ajouter un enfant avec firstChild ajoute seulement le premier enfant à innerHTML. Par exemple si nous devons ajouter:

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

seul le texte1 apparaîtra

Et ça:

ajoute une balise spéciale à innerHTML en ajoutant child, puis édite outerHTML en supprimant la balise créée. Je ne sais pas à quel point c'est intelligent, mais cela fonctionne pour moi .__ ou vous pouvez changer outerHTML en innerHTML pour qu'il ne soit pas nécessaire d'utiliser la fonction replace

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>

0
Łukasz Szpak