如何在多个元素上更改.innerHTML？ JavaScript的

Question

一旦我开始这个项目，我注意到我无法在多个元素上更改.innerHTML。它只输出第一行。这是为什么？

Select Case

document.getElementById('balance').innerHTML = 'Balance: ' + '100';
document.getElementById('tickets').innerHTML = 'Tickets: ' + '100';

Answer 1

那是因为你的标记错了。 <div>代码不是自动关闭的，因此您无法使用/>关闭它。

您必须使用结束标记，如下所示：

<div>

</div>

由于您的标记错误，HTML会尝试修复内容，并将每个div放在其中的内容之前。

这就是：

div{
margin: 3px;
padding: 10px;
background: blue;
border: 1px solid black;
}

<div id='balance'/>
<div id='tickets'/>
<div id='buy'/>
<div id='pot'/>

这是生成的标记：

当你替换第一个div的innerHTML时，里面的div将从DOM中删除。

Answer 2

尝试正确打开和关闭Content Division elements：

document.getElementById('balance').innerHTML = 'Balance: ' + 100;
document.getElementById('tickets').innerHTML = 'Tickets: ' + 100;

<div id="balance"></div>
<div id="tickets"></div>
<div id="buy"></div>
<div id="pot"></div>

Answer 3

那是因为你的标记错了。 <div>代码不是自动关闭的，因此您无法使用/>关闭它。由于您没有关闭标记，浏览器会在最后关闭它们，这使它们彼此嵌套，当您更改第一个标记的innerHTML时，您实际上替换了所有三个嵌套标记，它们不再存在，第二个JavaScript行失败。

明确关闭代码，您的代码将起作用：

document.getElementById('balance').innerHTML = 'Balance: ' + '100';
document.getElementById('tickets').innerHTML = 'Tickets: ' + '100';

<div id='balance'></div>
<div id='tickets'></div>
<div id='buy'></div>
<div id='pot'></div>