Wie man den Inhalt eines div hinzufügt, ohne seinen ursprünglichen Inhalt mit Javascript zu löschen

Question

Ich machte eine Quizseite und als ich an den Punkt kam, als ich einen Knopf machte, um Ihnen die korrekte Antwort Ihres Fehlers zu zeigen, benutzte ich Dokument .getElementById, aber es löschte immer den Rest der Antworten, die mit der gleichen Methode geschrieben wurden.

hier ist ein Ausschnitt aus meinem Javascript-Code

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

Gestalten Sie Ihre html div als:

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

Und Ihr Javascript wie :

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

Answer 2

Sie den Inhalt trennen können, die Sie dynamisch aus bestehenden Inhalten hinzufügen, denn wenn man innerHTML- aktualisieren wird es den gesamten Inhalt innerhalb des ausgewählten Elements aktualisieren. So eine Lösung ist ein Elternteil Div (das Div, das Sie zum Hinzufügen neuer Kind auswählen) und fügen Sie untergeordnete divs (dynamisch hinzugefügt div) innerhalb der für jede richtige Antwort. Wenn Sie dynamische IDs mit einer ID versehen möchten, können Sie einen Zähler oder eine Fragen-ID verwenden, für die dieses neue untergeordnete div hinzugefügt wurde. Zum Hinzufügen neuer Kinder zu "Eltern" können Sie die Methode "appendChild" verwenden. Es wird so etwas wie dieses:

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

ich eine Geige für Ihr Szenario erstellt haben, haben Sie bitte einen Blick: https://jsfiddle.net/jbw7ku15/