Javascript 在两个分区中创建元素答案

【问题标题】：Javascript Create Element in Two DivisionsJavascript 在两个分区中创建元素
【发布时间】：2012-01-10 06:44:40
【问题描述】：

我想使用 javascript 创建一个 iframe，然后将其插入到 id 为“fblike”的两个部门中。我尝试使用以下代码，但没有成功。

<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>

我知道代码中一定有一些错误，因为我对 javascript 知之甚少。任何人请帮助我！谢谢

更新：感谢您的帮助 :) 我更新了代码以消除错误。现在下面的代码对我有用：

<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>

【问题讨论】：

欢迎来到 StackOverflow！既然这已经解决了问题，您应该接受您认为回答了您的问题的任何答案。

标签： javascript getelementbyid appendchild createelement

【解决方案1】：

这个函数被称为document.getElementById，它返回一个单个元素，因为你不能拥有多个具有相同id的元素

所以改变

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

到

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

【讨论】：

【解决方案2】：

您不应该在同一页面上拥有具有相同值的id 属性。先解决这个问题，否则document.getElementById() 将永远无法正常工作（它只返回一个元素）并且document.getElementsById()（带有s）不存在。

【讨论】：

【解决方案3】：

首先，你有一个类型。它的 getElementById，因为在任何给定页面上只有一个元素可以有一个 ID。

第二，因为只有一个，所以不需要[0]。

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

但是，否则，我们需要更多详细信息来了解这是否是您遇到的唯一问题。

【讨论】：

【解决方案4】：

实际上，您想将两个 iframe 插入到两个 div 中，对吗？这是可以执行您想要的代码的代码（不能声称它是最佳的，因为您有重复的 id - 正如上面的人所说，如果可能的话，您最好制作两个不同的 id）：

<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>

【讨论】：