web-dev-qa-db-fra.com

Javascript - Ajouter du HTML à un élément conteneur sans innerHTML

J'ai besoin d'un moyen d'ajouter HTML à un élément conteneur sans utiliser innerHTML. La raison pour laquelle je ne veux pas utiliser innerHTML est parce que, quand il est utilisé comme ceci:

element.innerHTML += htmldata

Cela fonctionne en remplaçant tout d'abord le code HTML avant d'ajouter l'ancien code HTML, plus le nouveau code HTML. Ce n'est pas bon car cela réinitialise les médias dynamiques tels que les vidéos Flash intégrées ...

Je pourrais le faire de cette façon qui fonctionne:

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

Cependant, le problème avec cette méthode est qu’il ya cette balise span supplémentaire dans le document que je ne souhaite pas.

Comment cela peut-il être fait alors? Merci!

javascripthtmlinnerhtml
139
Bob

Pour donner une alternative (car utiliser DocumentFragment ne semble pas fonctionner): Vous pouvez la simuler en itérant sur les enfants du nœud nouvellement généré et en les ajoutant uniquement.

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}
86
Felix Kling

Je suis surpris qu'aucune des réponses ne mentionne la méthode insertAdjacentHTML(). Check it out ici . Le premier paramètre est l'endroit où vous voulez que la chaîne soit ajoutée et prend ("beforebegin", "afterbegin", "beforeend", "afterend"). Dans la situation du PO, vous utiliseriez "avant fin". Le deuxième paramètre est juste la chaîne html.

Utilisation de base:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
485
alnafie

alnafie a une excellente réponse à cette question. Je voulais donner un exemple de son code pour référence:

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}
body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}
<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

Espérons que cela soit utile aux autres.

12
Trevor Nestman
<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

assigner les données pour div avec le symbole "+ =" vous pouvez ajouter des données incluant les données HTML précédentes

3
vijay

C’est ce à quoi DocumentFragment était destiné.

_var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);
_

document.createDocumentFragment , .childNodes

1
Raynos