document.getElementById.innerHTML ne fonctionne qu'une fois - comment configurer mondial de copier des éléments?

Je veux créer un js externe de fichier, dans lequel je peux configurer la copie de plusieurs éléments dans mon fichier html. Je suis en utilisant document.getElementById("id").innerHTML = "ce que jamais"; à "injecter" ou "ajouter" ma copie du html, les éléments qui ont une certaine id.

Cela fonctionne bien, mais quand j'ai plus d'un élément avec le même id dans mon fichier html, le html de mon js-fichier est ajouté uniquement pour le premier élément mais le html de mon js-fichier doit être ajouté à tous les éléments avec le même id

C'est mon html:

<html>
<head>
<script src="copy.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div>
<strong id="back-button"></strong>
</div>

....

<div>
<strong id="back-button"></strong>
</div>

</body>
</html>

Et c'est mon fichier JS:

$(function() {
    $(document).ready(function addcopy() {

        /* global */
        document.getElementById("back-button").innerHTML = "go back";
});
});

Toute aide ou conseil est très apprécié.
Merci!

OriginalL'auteur Dominic | 2012-04-11

  1. 6

    Vous pouvez utiliser la classe, parce que ids peut être utilisé qu'une seule fois.

    <html>
<head>
<script src="copy.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="back-button">
</div>
....
<div class="back-button">
</div>
</body>
</html>

    Et en javascript :

    <script type="text/javascript">
     $(document).ready(function addcopy() {
         /* global */
         $(".back-button").html("<strong>go back</strong>");
     });
</script>
    Génial! Merci pour l'aide rapide - de cette façon, il est travail parfait!
    Je suis heureux que cela vous a aidé. BTW, vous devriez également voter toutes les réponses utiles. Tous d'entre eux sont corrects aussi.
    système ne laissez pas lui encore upvote
    oh oui... oublié jusqu'-vote des privilèges... 🙁

    OriginalL'auteur tusar

  2. 1

    En js vous pouvez le faire comme ceci: 

     document.getElementsByClassName('message')[0].innerHTML = "Good afternoon:)!";

    Ensuite, vous pouvez parcourir tous les éléments de cette classe.

    OriginalL'auteur Vasyl Gutnyk

  3. 0

    id attribut doit être unique, je sais que dans JQuery si vous souhaitez utiliser plusieurs sélecteur vous pouvez utiliser class à la place.

    Ou vous pouvez utiliser name et la getElementsByName() fonction qui va vous donner un tableau d'éléments en Javascript.

    Génial! Merci pour l'aide rapide!!! Fonctionne très bien avec votre proposition!!

    OriginalL'auteur Michael Laffargue

  4. 0

    Vous avez jQuery, pourquoi ne pas utiliser $('#back-button').html('go back') au lieu de la plaine/JS natif?

    Cependant, vous avez plus d'un bouton et Id doit être unique, de sorte que vous ne pouvez pas utiliser un id pour cela. Utilisation class="back-button" et suivants du code jQuery:

    $('.back-button').html('go back');
    Oui, pourquoi pas en effet.
    Parfait! Merci pour l'aide rapide - vous avez raison, il fonctionne parfaitement!

    OriginalL'auteur ThiefMaster

  5. 0

    Veuillez utiliser la classe au lieu de l'id pour les éléments HTML et utiliser jquery pour remplir le texte.

    <div>
<strong class="back-button"></strong>
</div>


$('.back-button').text('go back');   //OR
$('.back-button').html('go back');
    Génial! Merci pour l'aide rapide!!! Fonctionne très bien avec votre proposition!!

    OriginalL'auteur Shiv Shankar