web-dev-qa-db-fra.com

Définition de innerHTML: pourquoi ne met-il pas à jour le DOM?

Vous vous demandez pourquoi je ne peux pas obtenir document.getElementById("my_div").innerHTML pour mettre à jour le DOM lorsque je réassigne la variable. Par exemple:

<div id="my_div" onclick="clicky();">
    Bye.
</div>
<script type="text/javascript" charset="utf-8">
    function clicky() {
        var myDivValue = document.getElementById("my_div").innerHTML;
        myDivValue = "Hello";
        console.log(myDivValue);
    }
</script>

Dans le journal, je peux voir la variable se réaffecter lorsque je clique, mais le innerHTML de my_div reste inchangé. Pourquoi est-ce?


Après plusieurs années d'expérience supplémentaire ...

Pour ceux qui débutent (comme moi) et se sont retrouvés à demander la même chose, il y a deux concepts importants à comprendre:

  1. Attribuer par référence: Mon erreur était que je pensais que var myDivValue = element.innerHTML Créerait une référence/adresse à innerHTML et chaque fois que j'attribuerais une nouvelle valeur à cette référence, je pourrais simplement mettre à jour le contenu, mais ce n'est pas comme ça que ça marche.
  2. Attribuer par valeur: Au lieu de cela, je faisais simplement une copie de la valeur de element.innerHTML (Qui était vide) et affectais la valeur à myDivValue, puis dans myDivValue = "Hello";, J'assignais une nouvelle valeur à myDivValue, donc bien sûr, il ne mettrait jamais à jour element.innerHTML.

La partie déroutante: lorsque vous utilisez l'opérateur d'affectation (=) Dans JS, il n'est pas explicite que vous attribuez une référence ou une valeur (var referenceName = reference_to_thing Vs var containerName = newValue),

Comme beaucoup l'ont dit dans les réponses, la bonne façon de procéder consiste à affecter l'élément document.getElementById("my_div") à myDiv:

var myDiv = document.getElementById("my_div")

Et maintenant que j'ai un référence à l'élément appelé myDiv, je peux mettre à jour la propriété innerHTML quand je veux:

myDiv.innerHTML = "Hello" // innerHTML is now "Hello"
myDiv.innerHTML = "Goodbye" // Changed it to "Goodbye"
javascriptinnerhtml
16
nipponese

innerHTML correspond à une chaîne. Je ne sais pas pourquoi vous vous attendriez à quelque chose de différent. Considère ceci:

var a = 'foo'; // now a = 'foo'
var b = a; // now a = 'foo', b = 'foo'
b = 'bar'; // now a = 'foo', b = 'bar'

Réaffecter b ne change pas a.

Modifié pour ajouter: Au cas où ce ne serait pas clair d'après ce qui précède, si vous voulez changer innerHTML, vous pouvez simplement lui assigner directement:

document.getElementById("my_div").innerHTML = "Hello";

Vous n'avez pas besoin et ne pouvez pas utiliser de variable intermédiaire.

12
ruakh
 var myDivValue = document.getElementById("my_div").innerHTML;

stocke la valeur de innerHTML, innerHTML contient une valeur de chaîne, pas un objet. Donc, aucune référence à l'elem n'est possible. Vous devez stocker directement l'objet pour modifier ses propriétés.

var myDiVElem = document.getElementById("my_div");
myDiVElem.innerHTML = 'Hello'; // this makes the change
6
no_name_here

vous devez réaffecter l'élément après avoir défini innerHTML/externalHTML:

let indexInParent=[].slice.call(elem.parentElement.children).indexOf(elem);
elem.innerHTML=innerHTML;
elem=elem.parentElement.children[indexInParent];
0
kofifus

Pour les futurs googleurs, mon problème était que j'appelais les éléments pluriels.

document.getElementsByClassName(‘class’).innerHTML

Il a donc renvoyé un tableau et non un élément unique. Je l'ai changé au singulier.

document.getElementByClassName(‘class’).innerHTML

Cela m'a permis de mettre à jour la valeur innerHTML.

0
Daniel Butler

vous devez définir la valeur innerHTML comme

 var myDivValue = document.getElementById("my_div").innerHTML = "Hello";
0
david