Actualmente tengo este código en 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); }Esto funciona bien para crear una lista, pero los elementos de la lista se agregan al final de la lista html. ¿Cómo agrego la nueva entrada de usuario a la parte superior de la lista html?
Creo que puedes colocarlos en una matriz y luego invertirlos. este será un ejemplo a continuación
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() }Use prepend en lugar de append .
Aquí está el ejemplo de trabajo:
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>