Javascript 如何从用户处获取更新后的新文本和新文本下方的旧文本？

我的问题是，通过使用以下代码，我在另一个下面获得新的更新状态/文本，即，如果我更新了旧状态，则在旧状态之后显示新的最近更新的状态，如下所示

我需要的是，当用户输入任何状态时，它应该显示在上方，而不是之前的状态，这意味着新的最近更新的状态应该显示在上方，旧的状态应该显示在下方，等等。。。 请帮忙

我使用下面的代码在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');
        }
    });

var btn=document.getElementById（'statbtn'）；
var stat=document.getElementById（“状态”）；
var bigBox=document.getElementById（“bigBox”）
函数更新（）{
var状态=统计值；
bigBox.innerHTML+=“”+状态+“”；
stat.value=''；
btn.setAttribute（'disabled'，'disabled'）；
}
document.addEventListener（'DOMContentLoaded'，function（）{
btn.setAttribute（'disabled'，'disabled'）；
});
stat.addEventListener（'keyup'，function（）{
var btn=document.getElementById（'statbtn'）；
if（该值）{
btn.removeAttribute（'禁用'，''）；
}否则{
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>

更新您的客户
更新

只需将“bigBox.innerHTML+=”更改为“=xxxx+bigBox.innerHTML”

函数更新（）{
var状态=统计值；
bigBox.innerHTML=”“+状态+“”+bigBox.innerHTML；
stat.value=''；
btn.setAttribute（'disabled'，'disabled'）；
}

只需将“bigBox.innerHTML+=”更改为“=xxxx+bigBox.innerHTML”

函数更新（）{
var状态=统计值；
bigBox.innerHTML=”“+状态+“”+bigBox.innerHTML；
stat.value=''；
btn.setAttribute（'disabled'，'disabled'）；
}

您必须将其插入到

bigBox

var btn=document.getElementById（'statbtn'）；
var stat=document.getElementById（“状态”）；
var bigBox=document.getElementById（“bigBox”）
函数更新（）{
var状态=统计值；
var newDiv=document.createElement（“div”）；//创建新div
newDiv.innerHTML=status；//将状态放入新div
bigBox.insertBefore（newDiv，bigBox.firstChild）；//在bigBox的第一个子级之前插入新的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（该值）{
btn.removeAttribute（'禁用'，''）；
}否则{
btn.setAttribute（'disabled'，'disabled'）；
}
});

更新您的客户
更新
您必须将其插入到
bigBox


var btn=document.getElementById（'statbtn'）；
var stat=document.getElementById（“状态”）；
var bigBox=document.getElementById（“bigBox”）
函数更新（）{
var状态=统计值；
var newDiv=document.createElement（“div”）；//创建新div
newDiv.innerHTML=status；//将状态放入新div
bigBox.insertBefore（newDiv，bigBox.firstChild）；//在bigBox的第一个子级之前插入新的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（该值）{
btn.removeAttribute（'禁用'，''）；
}否则{
btn.setAttribute（'disabled'，'disabled'）；
}
});

更新您的客户
更新
如果您能够灵活地使用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');
  }
});

var btn=document.getElementById（'statbtn'），
stat=document.getElementById（“状态”）；
函数更新（）{
var状态=统计值；
$（“#bigbox”）.prepend（“+status+”）；
stat.value=''；
btn.setAttribute（'disabled'，'disabled'）；
}
document.addEventListener（'DOMContentLoaded'，function（）{
btn.setAttribute（'disabled'，'disabled'）；
});
stat.addEventListener（'keyup'，function（）{
var btn=document.getElementById（'statbtn'）；
if（该值）{
btn.removeAttribute（'禁用'，''）；
}否则{
btn.setAttribute（'disabled'，'disabled'）；
}
});
如果您能够灵活地使用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');
  }
});

var btn=document.getElementById（'statbtn'），
stat=document.getElementById（“状态”）；
函数更新（）{
var状态=统计值；
$（“#bigbox”）.prepend（“+status+”）；
stat.value=''；
btn.setAttribute（'disabled'，'disabled'）；
}
document.addEventListener（'DOMContentLoaded'，function（）{
btn.setAttribute（'disabled'，'disabled'）；
});
stat.addEventListener（'keyup'，function（）{
var btn=document.getElementById（'statbtn'）；
if（该值）{
btn.removeAttribute（'禁用'，''）；
}否则{
btn.setAttribute（'disabled'，'disabled'）；
}
});
谢谢，我在互联网上搜索那一行，非常感谢……谢谢，我在互联网上搜索那一行，非常感谢。。。