sendende Benutzereingabe zu div

Question

Hallo, ich bin hier mit einer kurzen Frage zum Senden von Benutzereingaben zu einem Div-Abschnitt eines HTML-Dokuments. Ich habe diese Frage früher gestellt und es schien zu breit zu sein, also werde ich diesmal versuchen, genauer zu sein.

Ich versuche, eine Benutzereingabe zum div onclick des Sendbuttons aber jedes Mal zu senden, ändert der Code einfach den Text, anstatt den folgenden Text darunter zu drucken. Ich bin neugierig, was ich damit falsch mache. Danke fürs Lesen und hier ist mein Code.

<div id="out"</div> 
<input type="text" name="textIn" id="txtin"> 
<input type="button" value="Hit me" onclick="hello()"></input> 
<script> 
function hello() { 
    document.getElementById("out").innerHTML = 
    document.getElementById('txtin').value + "<br />" 
} 
</script> 

https://jsfiddle.net/su0o83hj/1/

Answer 1

Sie haben einige Syntaxfehler, es zu beheben, und es wird funktioniert

<div id="out"></div> 
 
<input type="text" name="textIn" id="txtin" /> 
 
<input type="button" value="Hit me" onclick="hello()" /> 
 
<script> 
 
function hello() { 
 
    document.getElementById("out").innerHTML += 
 
    document.getElementById('txtin').value + "<br />" 
 
} 
 
</script>

Answer 2

Wenn Sie zu dem vorhandenen Text angehängt werden soll, verwenden Sie + = anstelle von = in der Funktion:

function hello() { 
    document.getElementById("out").innerHTML += 
    document.getElementById('txtin').value + "<br />" 
} 

Answer 3

Sie können Element.insertAdjacentHTML() geben den ersten Parameter beforeend verwenden:

var out = document.getElementById('out'), 
 
    txtin = document.getElementById('txtin'); 
 
    
 
function hello() { 
 
    out.insertAdjacentHTML('beforeend', txtin.value + '<br>'); 
 
}

<div id="out"></div> 
 
<input type="text" name="textIn" id="txtin"> 
 
<input type="button" value="Hit me" onclick="hello()">