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

如果要附加到现有文本，请在函数中使用+ =而不是=

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

Answer 2

您有一些语法错误，修复它并且可以正常工作

<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 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

将用户输入发送到div

3 个答案: