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

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

HTML:

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();
}

---

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

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

换成

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

document.getElementById（'display'）.innerHTML+=input+“
”；

如果每次用户隐藏帖子时都希望另一个段落标记中的文本。 您可以使用

+=

操作符添加更多段落标记。您也不希望嵌套段落标记，因此我们可以取而代之的是

postDisplay

元素

function write_below(form) {
    var input = document.forms.write.post.value;
    document.getElementById('postDisplay').innerHTML += '<p>' + input + '</p>';
    return false;
}
function resetIn(){
    document.getElementById("myPost");
    input.reset();
}

函数写入（表格）{
var输入=document.forms.write.post.value；
document.getElementById（'postDisplay'）。innerHTML+=''+input+'
'；
返回false；
}
函数resetIn（）{
document.getElementById（“myPost”）；
input.reset（）；
}

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

function write_below(form) {
    var input = document.forms.write.post.value;
    document.getElementById('postDisplay').innerHTML += '<p>' + input + '</p>';
    return false;
}
function resetIn(){
    document.getElementById("myPost");
    input.reset();
}