.innerHTML을 여러 요소로 변경하는 방법은 무엇입니까? JavaScript

Question

이 프로젝트를 시작하자마자 하나 이상의 요소에서 .innerHTML을 변경할 수 없다는 것을 알게되었습니다. 첫 번째 줄만 출력합니다. 왜 이런거야?

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

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

Answer 1

. <div> 태그는 자동으로 닫히지 않으므로 />으로 닫을 수 없습니다.

는이 같은 닫는 태그를 사용해야합니다 :

<div> 

</div> 

당신이 잘못된 마크 업을 가지고 있기 때문에, HTML 시도하고 일을 해결하고 그것을 전에 한 내부의 모든 사업부를 놓을 게됩니다.

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>