如何在多个位置使用innerHTML？
[英]How to use innerHTML in multiple locations?
问题描述
我正在尝试在多个位置动态更新文本。 但是我知道下面的代码不起作用，因为多次使用同一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>
3 个解决方案
解决方案1
3 已采纳 2013-09-20 15:10:48
您不能多次使用ID。
但是，您可以为该元素分配一个类，并使用jquery获取该类的每个元素。
<p class="fruit">text will appear</p>
剧本。
<script type="text/javascript">
$(".fruit").html("Oranges");
</script>
解决方案2
2 2013-09-20 15:13:15
您可以使用本机 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');
您可以类似地使用document.getElementsByClassName ，要记住的关键是您必须遍历类似于Array的NodeList 。
解决方案3
1 2013-09-20 15:13:03
如果您使用类而不是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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.