javascript document.getElementById.innerHTML 只工作一次 - 如何配置全局复制元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10101321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById.innerHTML works only once - how to configure global copy elements?
提问by Dominic
I want to create an external js-file, in which I can configure the copy of several elements in my html file. I'm using document.getElementById("id").innerHTML = "what ever";to "inject" or "add" my copy to html elements that have a certain id.
我想创建一个外部 js 文件，我可以在其中配置 html 文件中几个元素的副本。我正在使用document.getElementById("id").innerHTML = "what ever"; 将我的副本“注入”或“添加”到具有特定 ID 的 html 元素。
This works out fine, however when I have more than one element with the same id in my html file, the html from my js-file is only added to the first element but the html from my js-file should be added to all elements with the same id
这很好用，但是当我的 html 文件中有多个具有相同 id 的元素时，我的 js 文件中的 html 只添加到第一个元素，但我的 js 文件中的 html 应该添加到所有元素同一个id
That's my html construct:
那是我的 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>
And that's my JS file:
这是我的 JS 文件：
$(function() {
$(document).ready(function addcopy() {
/* global */
document.getElementById("back-button").innerHTML = "go back";
});
});
Any help or tip is much appreciated. Thanks!
非常感谢任何帮助或提示。谢谢！
采纳答案by tusar
You could use class, because ids can be used only once.
您可以使用 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>
And in javascript :
在 javascript 中：
<script type="text/javascript">
$(document).ready(function addcopy() {
/* global */
$(".back-button").html("<strong>go back</strong>");
});
</script>
回答by Vasyl Gutnyk
In js you can do it like this:
在 js 中，你可以这样做：
document.getElementsByClassName('message')[0].innerHTML = "Good afternoon:)!";
Then you can loop through all elements of this class.
然后你可以循环遍历这个类的所有元素。
回答by Shiv Shankar
Please use class instead of id for the HTML elements and use jquery to fill in the required text.
对于 HTML 元素，请使用 class 而不是 id，并使用 jquery 填写所需的文本。
<div>
<strong class="back-button"></strong>
</div>
$('.back-button').text('go back'); // OR
$('.back-button').html('go back');
回答by Michael Laffargue
idattribute should be unique, I know that in JQuery if you want to use multiple selector you can use classinstead.
id属性应该是唯一的，我知道在 JQuery 中如果你想使用多个选择器，你可以class改用。
Or you can use nameand the getElementsByName()function that will give you an array of elements in Javascript.
或者您可以使用name和getElementsByName()函数，该函数将为您提供 Javascript 中的元素数组。
回答by ThiefMaster
You have jQuery, why not use $('#back-button').html('go back')instead of the plain/native JS?
你有 jQuery，为什么不使用$('#back-button').html('go back')普通/原生 JS 来代替？
However, you have more than one button and IDs mustbe unique, so you cannot use an id for this. Use class="back-button"and the following jQuery code:
但是，您有多个按钮且ID必须是唯一的，因此您不能为此使用 ID。使用class="back-button"以下 jQuery 代码：
$('.back-button').html('go back');
