發送用戶輸入到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()">