如何在多个位置使用innerHTML？答案

【问题标题】：How to use innerHTML in multiple locations?如何在多个位置使用innerHTML？
【发布时间】：2013-09-20 15:08:13
【问题描述】：

我正在尝试在多个位置动态更新文本。但是我知道下面的代码不起作用，因为同一个 ID 被多次使用。有什么想法吗？

<html>

Favorite things to eat<p id="fruit">Text will appear</p>
Things that grow on trees<p id="fruit">Text will appear</p>

Dinner<p id="fish">Text will appear</p>
Creature in the ocean<p id="fish">Text will appear</p>

</html>

Javascript：

<script>

document.getElementById("fruit").innerHTML="Oranges";
document.getElementById("fish").innerHTML="Shark";

</script>

【问题讨论】：

根据 HTML5 标准，ID 应该是 100% 唯一的。

标签： javascript innerhtml getelementbyid

【解决方案1】：

你不能多次使用 id。

但是，您可以为元素分配一个类并使用 jquery 来获取该类的每个元素。

<p class="fruit">text will appear</p>

脚本。

<script type="text/javascript">

$(".fruit").html("Oranges");

</script>

【讨论】：

您还应该提供非 jquery 方式，因为这就是 OP 正在使用的方式。
@RUJordan 我想告诉他有关 getElementsByClassName 但我不确定它是否支持跨浏览器.. 不确定为什么有人会拒绝使用让您不必担心浏览器支持什么的库。 .
我不反对，但我知道在某些情况下，班级项目或雇主只会说 JS，没有库。（不是讨厌，不是拒绝，只是说）
@RUJordan 并不是在暗示你是 :) .. 我是在证明我为什么指定 jquery 选项.. 也许他会想尝试一下并停止拔头发 :)
@scartag 我写在VanillaJS 是因为它让我觉得我学习了JavaScript，而不是只是使用别人的API。跨度>

【解决方案2】：

您可以使用 native JavaScript document.querySelectorAll

Favorite things to eat <span class="fruit">Text will appear</span>
Things that grow on trees <span class="fruit">Text will appear</span>

Dinner <span class="fish">Text will appear</span>
Creature in the ocean <span class="fish">Text will appear</span>

function replaceTextInClass(className, text) {
    var elms = document.querySelectorAll('.' + className), i;
    for (i = 0; i < elms.length; ++i) {
        elms[i].textContent = text;
    }
}
replaceTextInClass('fruit', 'Oranges');
replaceTextInClass('fish', 'Shark');

DEMO

您可以类似地使用document.getElementsByClassName，要记住的关键是您必须迭代类似于 Array 的 NodeList。

【讨论】：

【解决方案3】：

如果您使用 class 而不是 id 属性，然后使用 jquery 选择具有该类的元素并将其文本设置为如下所示，将达到相同的效果：

<html>
<body>
  <p class="fish"> some fish </p>
  <p class="fish"> other fish </p>
</body>
</html>

然后 javascript 将是：

<script>
$(".fish").html("some text here");
</script>

当然，您需要像这样将 jquery 的链接添加到 html 页面

<script type="text/javascript" src="http://jquery ..." />

只要找到正确的网址。你可以在 jquery.com 上找到它

对于那些不喜欢它的人来说，这里是非 jQuery 方式：

代替上面的脚本使用：

<script>
var i, 
    elements = document.getElementsByClassName('fish');
for ( i = 0; i < elements.length; i += 1) {
  elements[i].innerHTML = "some text here";
}
</script>

这在某些版本的 IE 中可能不起作用。

【讨论】：