Question

我正在尝试动态更新多个位置的文字。但是我知道下面的代码不起作用，因为不止一次使用相同的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>

Answer 1

您不能多次使用该ID。

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

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

剧本。

<script type="text/javascript">

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

</script>

Answer 2

您可以使用原生 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，要记住的关键是您必须迭代 NodeList ，类似于数组。

Answer 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中，这可能不起作用。

如何在多个位置使用innerHTML？

3 个答案: