在JavaScript中創建回車按鈕

Question

我正在嘗試創建一個按鈕，單擊該按鈕時會創建回車符。 例如，在我的網頁頂部，有一些按鈕，當單擊它們時會輸出單詞。 單擊下一個按鈕后，新單詞將立即放置在其他單詞之后。 我需要此按鈕為其上方的輸出單詞創建新行。 我已經按照以下方式嘗試了一些代碼：

<input type="button" value="Return"
onclick="document.getElementById('outputDiv').innerHTML=
document.getElementById('outputDiv').innerHTML + \br;">
<div id="outputDiv"></div>

任何幫助將不勝感激。

Answer 1

嘗試避免使用.innerHTML ，而是考慮使用node.appendChild和document.createElement的DOM方法 。

function newline() {
    document.getElementById('outputDiv').appendChild(
        document.createElement('br')
    );
}
// after input exists, select it with your favourite method to attach listener
document.querySelector('input[value="Return"]').addEventListener(
    'click',
    newline
);

以這種方式附加HTML時，它也不再需要onclick屬性

<input type="button" value="Return" />
<div id="outputDiv"></div>

DEMO