javascript - 使用 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

改为添加子元素。由于没有prependChild()函数，所以需要“插入到第一个 child 之前”:

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()