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

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

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

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

解决方法

那是因为你的标记错了. < 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中删除.