Question

所以我正在处理个人项目，这只是一个简单的状态更新。我不断添加更多功能，但我已经被困了很长一段时间了。问题是，每当有人发布新状态时，我希望它出现在顶部，但是顶部的那个是创建的第一个帖子，这是一个问题。这意味着您必须向下滚动到底部才能看到最新的帖子。

截图：

Main page

Problem occurs, new element goes underneath old

这是javascript：

function statusPost() {
    status = document.getElementById("Status").value;

    if (status == "") {
        alert("Please write a status")
    }
    else {
        document.getElementById("Status").value = "";
        div = document.createElement("div");
        document.getElementById("container").appendChild(div);
        div.className = "update";
        div.innerHTML = status;
    }
}

Answer 1

而不是在div末尾追加container，您应prepend使用insertBefore

这是您修改后的代码（我保存了一些对元素的引用以保持可读性）

var status = document.getElementById("Status");
var container = document.getElementById("container");

function statusPost() {
    if (status.value == "") {
        alert("Please write a status")
    } else {
        status.value = "";
        div = document.createElement("div");
        div.className = "update";
        div.innerHTML = status;
        container.insertBefore(div, container.firstChild);
    }
}

Answer 2

使用insertBefore（）代替appendChild（）

在这里查看：

W3school link

Answer 3

如果您使用的是jquery，可以使用prepend（）方法来实现这一点。数据将排在最前面。 Preppend

 <h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
</div>
$( ".inner" ).prepend( "<p>Test</p>" );

如果您需要在Java脚本中使用此功能，请尝试

insertBefore

如何在顶部创建新创建的元素

3 个答案: