顛倒用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()功能，你需要「的第一個孩子之前將其插入」：

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

Answer 2

appendChild增加一個節點作爲最後子。你想第一個節點前插入：

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