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

它将最新的事件列在底部，最老的事件列在顶部。我该如何反转它呢？ 我希望它能显示最新的事件在顶部。

- bententhhousand

---

你应该在元素前面添加而不是后面添加。 - Jonathan

Answer 1

相比之下，应该在子元素前插入。由于没有 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()的内容。

- rink.attendant.6

Answer 2

appendChild 将节点添加为最后一个子节点。您想在第一个节点之前插入：

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

- Amadan