热反转从javascript的html列表的顺序?

Question

我目前在JavaScript中有这段代码

function addTask() {
// Declaring Variables
var item = document.getElementById("text_field").value;
var text = document.createTextNode(item);
var list_element = document.createElement("li");
var checkbox = document.createElement("input");

checkbox.setAttribute("type", "checkbox");
list_element.appendChild(checkbox);
list_element.appendChild(text);
document.getElementById("todo-list").appendChild(list_element);
}

创建一个列表很好，但是列表项被添加到html列表的底部。如何将新的用户输入添加到html列表的顶部?

Answer 1

我认为你可以把它们放在一个数组中，然后反转它们。这将是

下面的示例

function addTask() {
// Declaring Variables
var item = document.getElementById("text_field").value;
var text = document.createTextNode(item);
var list_element = document.createElement("li");
var checkbox = document.createElement("input");

checkbox.setAttribute("type", "checkbox");
list_element.appendChild(checkbox);
list_element.appendChild(text);
document.getElementById("todo-list").appendChild(list_element);
}
function reverseElement(){
var reversedElement = Array.from(document.getElementById("todo-list")).reverse()
} 

Answer 2

用prepend代替append

下面是工作示例:

function addTask() {
// Declaring Variables
var date = new Date;
var item = document.getElementById("text_field").value;
var list_element = document.getElementById('tasks');
var li = document.createElement("li");
li.innerText = item + 't|t' + date.toISOString();

list_element.prepend(li);
}

<input id="text_field" />
<button onclick="addTask()">Add</button>
<div>
<h1>Tasks</h1>
<ol id="tasks"></ol>
</div>