javascript - 如何在新行上显示新输入而不是替换旧输入

Question

我正在尝试创建一个发布系统。它有点工作，但问题是每次用户输入新文本时，旧文本都会被替换。我一直在努力解决这个问题，但运气不佳。我使用的是 HTML5、CSS3 和 JavaScript 的组合，我使用的是 CodePen，所以框架和文件之间的链接已经为我自动编码。

HTML:

<form id="post" name="write">
<div class="textbox">
    <input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="myPost">
    <button id="Post" onclick= "return write_below(this); return resetIn();" value="submit">Post</button>
</div>

</form>
    <div class="posts" id="postDisplay">
        <p><span id='display'></span></p>
    </div>

CSS:

* {
    margin: 0;
    padding: 0;
    border: 1px solid black;
    background-color: #8ec7f9;
}

body {
    height: absolute;
    padding-top: 20%;
    padding-bottom: 20%;
    padding-left: 10%;
    padding-right: 10%;
}

#post {
    margin: auto;
}

#post .textbox {
    height: 100px;
}

#post .textbox .postwriter {
    width: 94.3%;
    height: 96%;
    background-color: hsla(0, 0%, 95%, 1);
    font-size: 140%;
}

#post .textbox #Post {
    height: 100%;
    width: 5%;
    cursor: pointer;
    background-color: #c78fff;
    border-radius: 5%;
    font-size: 20px;
}

.posts {
    height: 100px;
    font-family: Arial, sans-serif;
    font-size: 110%;
}

.posts #display{
    margin: auto;
}

JavaScript:

function write_below(form) {
    var input = document.forms.write.post.value;
    document.getElementById('display').innerHTML = input;
    return false;
}
function resetIn(){
    document.getElementById("myPost");
    input.reset();
}

Answer 1

由于这一行，您正在覆盖以前的内容而不是附加到它

document.getElementById('display').innerHTML = input;

改成

document.getElementById('display').innerHTML += input + "<br/>";