javascript - 如何获取用户向上获取的新更新文本和新文本下方的旧文本？

Question

我的问题是，通过使用以下代码，我会得到一个新的更新状态/文本，即，如果我更新了它，那么最近更新的新状态会再次显示在旧状态之后，依此类推...

我需要当用户输入任何状态时，它应该显示在比之前状态更靠上的位置，这意味着最近更新的新状态应该显示在上面，旧状态应该显示在下面，依此类推... 请帮忙...

我正在使用以下代码在 JavaScript 中显示状态

var btn = document.getElementById('statbtn');
    var stat = document.getElementById("status");
    var bigBox = document.getElementById("bigbox")


    function update() {
        var status = stat.value;
        bigBox.innerHTML += "<div id='box1'>"+ status + "</div>";
        stat.value = '';
        btn.setAttribute('disabled','disabled');
    }


    document.addEventListener('DOMContentLoaded', function(){
        btn.setAttribute('disabled','disabled');
    });


    stat.addEventListener('keyup', function(){
        var btn = document.getElementById('statbtn');
        if(this.value){
            btn.removeAttribute('disabled','');
        } else {
            btn.setAttribute('disabled','disabled');
        }
    });

我的html代码是

<div id='box'>
                 <h4>Update Your Customers</h4>
                 <form id="stat">
                     <textarea type="text" name="status" id="status" placeholder="Anything You Want To Say...?"></textarea>
                 </form>     
                <button class="btn btn-primary" id='statbtn' type="submit" onclick="update()">Update</button>
             </div>
<div id="bigbox">
   </div>

Answer 1

如果您能够灵活地使用 jQuery，那么这应该可行:

var btn = document.getElementById('statbtn'),
    stat = document.getElementById("status");

function update() {
  var status = stat.value;
  $("#bigbox").prepend("<div>" + status + "</div>");
  stat.value = '';
  btn.setAttribute('disabled', 'disabled');
}

document.addEventListener('DOMContentLoaded', function() {
  btn.setAttribute('disabled', 'disabled');
});

stat.addEventListener('keyup', function() {
  var btn = document.getElementById('statbtn');
  if (this.value) {
    btn.removeAttribute('disabled', '');
  } else {
    btn.setAttribute('disabled', 'disabled');
  }
});