web-dev-qa-db-fra.com

javascript innerHTML ajout au lieu de remplacer

question rapide, je sais que nous pouvons changer le contenu d'un

<div id="whatEverId">hello one<div> en utilisant:

document.getElementById("whatEverId").innerHTML="hello two";

maintenant, est-ce que je peux AJOUTER des trucs au div au lieu de le remplacer ??? donc je peux avoir

<div id="whatEverId">hello one hello two<div>

(en utilisant bien sûr quelque chose de similaire)

javascriptajaxdominnerhtml
26
Gmo
<div id="whatever">hello one</div>
<script>
document.getElementById("whatever").innerHTML += " hello two";
</script>
54
jcomeau_ictx
document.getElementById("whatEverId").innerHTML =  document.getElementById("whatEverId").innerHTML +  "hello two" + document.getElementById("whatEverId").innerHTM ;
3
Piotr Kula

Ce que jcomeau_ictx a suggéré est une manière inefficace d'éditer le innerHTML. Vérifiez Ben Cherry's PPT http://www.bcherry.net/talks/js-better-faster

La bonne façon consiste à détacher l'élément et à y apporter des modifications, puis à le rajouter au nœud parent. Utilisez https://Gist.github.com/cowboy/938767 Javascript natif de ce Gist pour détacher l'élément.

2
mareenator

Notez que l'utilisation de element.innerHTML += 'content' viderait inputs et textareas à leur état par défaut, vide, décocher les cases, etc. car l'ensemble innerHTML serait réinterprété par le navigateur.

Si vous devez conserver l'état, vous devez créer un nouvel élément (un <span> par exemple) et l'ajouter à l'élément courant, comme dans:

let newElement = 'span'
newElement.innerHTML = 'new text'
document.getElementById('oldElement').appendChild(newElement)
1
Nighto

Si vous ajoutez, vous pouvez simplement changer votre = en + =

document.getElementById ("whatEverId"). innerHTML + = 'bonjour deux';

Si préfixe

document.getElementById ("whatEverId"). innerHTML = 'bonjour deux' + document.getElementById ("whatEverId"). innerHTML;

Bien que je recommande fortement d'utiliser les bibliothèques/frameworks jQuery ou MooTools pour faire ce genre de choses. Si vous ajoutez des balises et pas seulement des nœuds de texte, vous devez utiliser le DOM createElement ou l'une des bibliothèques/frameworks susmentionnés.

1
gingerCodeNinja

Vous pouvez le faire en ajoutant une chaîne div comme ceci.

document.getElementById ('div_id'). innerHTML + = 'Hello Two';

1
Rukmi Patel