如何根据它们在 JavaScript 中的顺序更改标签 innerHTML？
Posted
技术标签:
【中文标题】如何根据它们在 JavaScript 中的顺序更改标签 innerHTML？【英文标题】：How do I change a tag's inner HTML based on their order in JavaScript? 【发布时间】：2020-09-28 01:48:02 【问题描述】：我对 javascript 还很陌生，我正在练习一些较小的项目。
我要做的是将一堆标签的内部 html 更改为它们按顺序排列的数字。
让我解释一下。
我想从这里开始。
*Number <br>
*Number <br>
*Number
到这里。
*1 <br>
*2 <br>
*3
纯粹通过 JavaScript 来做。
这就是我现在拥有的。
HTML
<p id="thisIsANumber">Number</p>
<p id="thisIsANumber">Number</p>
<p id="thisIsANumber">Number</p>
<button onclick="orderElements()">Order Elements</button>
JavaScript
function orderElements()
var reference = document.getElementById('thisIsANumber');
for (var i = 0; i < 3; i++)
reference[i].innerHTML = i;
【问题讨论】：
错误代码 => id 必须是唯一的 您的第一个示例显示<br />（换行符）元素，但您的第二个示例使用<p>（段落）元素。它们是不同的东西。请注意，<br /> 是一个没有内容的自闭合元素，而 <p> 有。
另外，当设置人类可读的文本内容时，你应该使用.textContent而不是.innerHTML。
进一步解释 Jojo 先生的评论 — 您的 document.getElementById('thisIsANumber') 只会获得 一个 元素，因为 id 在一个页。如果您打算拥有多个相同类型的项目，那么您想要使用的是 class class="thisIsANumber"
对不起，戴，我从来没有想过要显示 标签。我使用它们将点显示为列表，因为默认情况下它们显示在同一行。
【参考方案1】：
正如 cmets 中所述，您不能让多个事物使用相同的 id — 您应该改用 class。
例如，这表示你有一个段落，而这个种类的段落是一个“编号段落”：
<p class="numbered-paragraph">
现在您可以选择所有具有该类的段落，遍历它们并给每个段落一个数字。
这个示例代码是明确的，所以很清楚——有很多方法可以缩短它：
document.getElementById('numberGenerator')
.addEventListener('click', function(e)
const paragraphs = document.querySelectorAll('.numbered-paragraph');
let i = 1;
for (p of paragraphs)
p.innerText = 'paragraph number ' + (i++);
);<p class="numbered-paragraph">Number</p>
<p class="numbered-paragraph">Number</p>
<p class="numbered-paragraph">Number</p>
<button id="numberGenerator">Order Elements</button>请注意，我还使用带有匿名函数的 addEventListener，而不是带有命名函数的内联 onclick=。
【讨论】：
【参考方案2】：这里的主要问题是您使用了id 而不是class。问题在于id 用于标识一个元素，而class 可用于标识多个元素。如果您想要的是编号的段落元素，而不是有序列表，那么这应该可以解决问题：
function orderElements()
var reference = document.getElementsByClassName("thisIsANumber");
for (var i = 0; i < 3; i++)
reference[i].innerHTML = i;
<body>
<p class="thisIsANumber">Number</p>
<p class="thisIsANumber">Number</p>
<p class="thisIsANumber">Number</p>
<button onclick="orderElements()">Order Elements</button>
</body> 【讨论】：
感谢简单的解释和解决方案！以上是关于如何根据它们在 JavaScript 中的顺序更改标签 innerHTML？的主要内容，如果未能解决你的问题，请参考以下文章
如何更改 Meteor 加载 Javascript 文件的顺序？