发送用户输入到div

Question

你好，我在这里发送一个关于发送用户输入到HTML文档的div部分的快速问题。我之前问过这个问题，看起来太宽泛了，所以这次我会试着更具体一些。

我试图发送一个用户输入到发送按钮的div onclick，但每次代码只是改变文本，而不是打印下面的文本。我很好奇我在做什么错。感谢阅读，这里是我的代码。

<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

你有一些语法错误，解决它，它会工作

<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

如果要追加到现有文本，使用+ =而不是=在功能中：

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

Answer 3

您可以使用Element.insertAdjacentHTML()传递的第一个参数beforeend：

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()">