如何在顶部获取新创建的元素[重复]答案

【问题标题】：How to get newly created elements on top [duplicate]如何在顶部获取新创建的元素[重复]
【发布时间】：2016-09-06 11:53:13
【问题描述】：

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

截图：

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

【问题讨论】：

确实如此，感谢您的链接 :p 现在已解决问题！

标签： javascript html css function element

【解决方案1】：

您应该使用insertBeforeprepend，而不是在container 的末尾附加div

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

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

【讨论】：

【解决方案2】：

使用 insertBefore() 代替 appendChild()

在这里查看：

W3school link

【讨论】：

【解决方案3】：

如果您使用 jquery，您可以使用 , prepend() 方法来实现这一点。数据将排在首位。 Preppend

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

如果你在 Java Script 中需要这个，请尝试

insertBefore

【讨论】：