使用 JavaScript 反转添加到 DOM 的元素的顺序

Question

我正在用 JavaScript 制作游戏，需要事件日志。如果我攻击，它会告诉我是否击中或未击中。这是我的代码：

function eventlogshow (text){
    var para = document.createElement("p");
    var node = document.createTextNode(text);
    para.appendChild(node);

    var element = document.getElementById("eventlog");
    element.appendChild(para);
}

它在底部列出了最新的事件，在顶部列出了最旧的事件。我该如何扭转这个局面？ 我希望它在顶部显示最近的事件。

Answer 1

更新（2024 年 1 月）：

Element.prepend()

是2018年及之后发布的所有主流浏览器都可用的方法：

function eventlogshow (text){
    var para = document.createElement("p");
    var node = document.createTextNode(text);

    para.appendChild(node);

    var element = document.getElementById("eventlog");
    element.prepend(para);
}

原始答案（2014 年 5 月）：

改为在子元素前面添加。由于没有

prependChild()

函数，因此需要“将其插入到第一个子元素之前”：

function eventlogshow (text){
    var para = document.createElement("p");
    var node = document.createTextNode(text);
    
    para.appendChild(node);

    var element = document.getElementById("eventlog");
    element.insertBefore(para, element.firstChild);
}

这里也提出了类似的问题：如何将 DOM 元素设置为第一个子元素？.

了解更多关于

Node.firstChild

和

Node.insertBefore()

Answer 2

appendChild

添加一个节点作为 last 子节点。您想在第一个节点之前插入：

element.insertBefore(para, element.childNodes[0]);