JavaScript Créer élément dans deux divisions

Question

Je veux créer un iframe en utilisant javascript puis l'insérer dans deux divisions ayant toutes deux id « fblike ». J'ai essayé d'utiliser le code suivant, mais ça n'a pas marché.

<script type="text/javascript">
  (function(){
    var fb = document.createElement('iframe');
    fb.src = 'http://www.facebook.com/plugins/like.php?href='+encodeURIComponent(location.href)+'&amp;locale=en_US&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21';
    fb.scrolling = 'no';
    fb.frameborder = '0';
    fb.style = 'border:none; overflow:hidden; width:90px; height:21px;';
    fb.allowTransparency = 'none';
    document.getElementsById('fblike')[0].appendChild(fb);
  })();
</script>

Je sais qu'il doit y avoir une erreur (s) dans le code parce que je connais très peu de javascript. Une aide-moi s'il vous plaît !! Merci

Mise à jour: Merci pour votre aide :) Je mis à jour le code pour supprimer les erreurs. Maintenant, le code suivant fonctionne pour moi:

<script type="text/javascript"> 
  (function(){
    var fb = document.createElement('iframe');
    fb.src = 'http://www.facebook.com/plugins/like.php?href='+encodeURIComponent(location.href)+'&locale=en_US&send=false&layout=button_count&width=90&show_faces=false&action=like&colorscheme=light&font=verdana&height=21';
    fb.style.cssText = 'border:none; overflow:hidden; width:90px; height:21px;';
    fb.frameBorder = '0';
    fb.scrolling = 'no';
    fb.allowTransparency = 'true';
    document.getElementById('fbabove').appendChild(fb.cloneNode(true));
    document.getElementById('fbbelow').appendChild(fb.cloneNode(true));
  })();
</script>

Answer 1

Vous ne devriez pas avoir un attribut id avec une valeur égale sur la même page. Fix que la première, sinon document.getElementById() ne va jamais fonctionner correctement (il retourne que jamais un élément) et document.getElementsById() (avec un s) n'existe pas.

Answer 2

La fonction est appelée document.getElementById et renvoie un simple élément, puisque vous ne pouvez jamais avoir plus d'un élément avec le même id

changement

document.getElementsById('fblike')[0].appendChild(fb);

à

document.getElementById('fblike').appendChild(fb);

Answer 3

Tout d'abord, vous avez un type. son getElementById, étant donné qu'un seul élément peut avoir une carte d'identité sur une page donnée.

En second lieu, car il n'y a qu'une seule, il n'y a pas besoin pour le [0].

document.getElementById('fblike').appendChild(fb);

Mais, sinon, nous avons besoin de plus de détails à savoir si cela est le seul problème que vous avez.

Answer 4

En fait, vous voulez insérer deux iframes en deux divs, non? Voici le code qui va faire ce que vous voulez (ne peut prétendre qu'il est optimal puisque vous avez en double ids - que les gens ci-dessus par exemple, vous feriez mieux de faire deux ids distincts si possible):

<script type="text/javascript">
  (function(){
    var list = document.getElementsByTagName('div'), i, fb;
    for (i = 0; i < list.length; i++) {
        if (list[i].id == 'fblike') {
            fb = document.createElement('iframe');
            fb.src = 'http://www.facebook.com/plugins/like.php?href='+encodeURIComponent(location.href)+'&amp;locale=en_US&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21';
            fb.scrolling = 'no';
            fb.frameborder = '0';
            fb.style = 'border:none; overflow:hidden; width:90px; height:21px;';
            fb.allowTransparency = 'none';
            list[i].appendChild(fb);
        }
    }
  })();
</script>