javascript - 如何让新创建的元素置顶

标签 javascript html css function element

<分区>

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

截图:

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

最佳答案

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

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

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

关于javascript - 如何让新创建的元素置顶,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39348411/

上一篇:html - CSS 背景颜色不起作用?

下一篇:css - 如何使用 :global css classes - css modules

相关文章:

javascript - 使用selenium执行jquery时网页挂起

javascript - 附加一个在生产中不起作用的表

html - 如何将一个字符替换为另一个字符但仅限于 href?

html - 固定宽度的三个div的布局

javascript - 编写此 DOM 操作的更有效/适当的方法?

javascript - 计算价格 JavaScript

javascript - 表单提交和功能运行后内容立即消失

javascript - Parse.com javascript 登录

html - 为什么每种颜色都不会填充我的菜单栏中的相应框?

css - 边框半径和背景剪辑在伪元素上无法按预期工作