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

这里也提出了类似的问题：How to set DOM element as first child? 。

阅读更多关于Node.firstChild和Node.insertBefore()