document.getElementById.innerHTML 只工作一次 - 如何配置全局复制元素？答案

【问题标题】：document.getElementById.innerHTML works only once - how to configure global copy elements?document.getElementById.innerHTML 只工作一次 - 如何配置全局复制元素？
【发布时间】：2012-04-23 11:39:05
【问题描述】：

我想创建一个外部 js 文件，我可以在其中配置我的 html 文件中多个元素的副本。我正在使用 document.getElementById("id").innerHTML = "what ever"; 将我的副本“注入”或“添加”到具有特定 id 的 html 元素中。

这很好，但是当我的 html 文件中有多个具有相同 id 的元素时，我的 js 文件中的 html 仅添加到第一个元素 但我的 js 文件中的 html应该添加到所有具有相同 id 的元素

这是我的 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>

这是我的 JS 文件：

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

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

非常感谢任何帮助或提示。谢谢！

【问题讨论】：

标签： javascript jquery html document

【解决方案1】：

你可以使用 class，因为ids 只能使用一次。

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

在 javascript 中：

<script type="text/javascript">
     $(document).ready(function addcopy() {
         /* global */
         $(".back-button").html("<strong>go back</strong>");
     });
</script>

【讨论】：

太棒了！感谢您的快速帮助 - 这样就完美了！
很高兴它对您有所帮助。顺便说一句，您还应该投票赞成所有有用的答案。他们也都是正确的。

【解决方案2】：

在js中你可以这样做：

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

然后就可以遍历这个类的所有元素了。

【讨论】：

【解决方案3】：

id 属性应该是唯一的，我知道在 JQuery 中如果你想使用多个选择器，你可以使用 class 来代替。

或者您可以使用name 和getElementsByName() 函数，该函数将为您提供Javascript 中的元素数组。

【讨论】：

【解决方案4】：

你有 jQuery，为什么不使用 $('#back-button').html('go back') 代替普通/原生 JS？

但是，您有多个按钮并且ID 必须是唯一的，因此您不能为此使用 id。使用class="back-button" 和以下 jQuery 代码：

$('.back-button').html('go back');

【讨论】：

是的，why not 确实如此。
完美！感谢您的快速帮助 - 你是对的 - 它工作得很好！

【解决方案5】：

HTML 元素请使用 class 而不是 id，并使用 jquery 填写所需的文本。

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


$('.back-button').text('go back');   // OR
$('.back-button').html('go back');

【讨论】：