div의 내용을 자바 스크립트를 사용하여 원래의 내용을 삭제하지 않고 추가하는 방법

Question

퀴즈 사이트를 만들고 있었는데 실수로 정답을 표시하는 버튼을 만들었을 때 문서를 사용했습니다. .getElementById하지만 같은 방법으로 작성된 나머지 응답은 항상 지워졌습니다. 여기

내 자바 스크립트 코드

if (mistakes > 0) { 
    if (document.getElementById('wrongAnswer1').checked === true || 
     document.getElementById('wrongAnswer2').checked === true) { 
     document.getElementById('mistakesDiv').innerHTML = 
      document.getElementById('mistakesDiv').innerHTML + 
      "<br>" + 
      "question 1's correct answer is" + 
      document.getElementById('correctAnswer1').value; 
    } 
} 

Answer 1

이 디자인을 당신의 html div 등 :

<div id="contentId"> 
...... 
...... 
</div> 

과 같이 당신의 자바 스크립트 :

var div = document.getElementById('contentId'); 
div.innerHTML += 'your content'; 

Answer 2

당신이 innerHTML을을 업데이트 할 때 선택한 요소 내부의 모든 내용을 업데이트하기 때문에 당신은 기존 내용에서 동적으로 추가하는 내용을 분리 할 수의 조각입니다. 한 가지 해결책은 상위 div (새 하위를 추가하기 위해 선택하는 div)를 취하고 각 정답마다 하위 div (동적으로 div를 추가)를 추가하는 것입니다. 동적 ID에 일부 ID를 부여하려는 경우이 새 하위 div가 추가 된 카운터 또는 질문 ID를 사용할 수 있습니다. "parent"에 새로운 자식을 추가하는 경우 "appendChild"메서드를 사용할 수 있습니다. 좀 제발 내가 당신의 시나리오에 바이올린을 만든

<div id="parent"> 
    <div id="child1">Here goes the correct answer</div>(button element will also work fine) 
</div> 

: 그것은이 같은 것 https://jsfiddle.net/jbw7ku15/