如何使用JavaScript反转HTML列表顺序及将新任务添加至HTML列表顶部？

嘿，这两个问题我来帮你搞定！

要反转HTML列表的顺序，你可以借助DOM API结合数组方法来实现，这里有两种简单可行的方式：

方法1：转换为数组反转后重新挂载 #

这种方法直观易懂，先把列表的子元素转为数组，反转后再重新添加到列表中：

// 获取目标列表元素
const targetList = document.getElementById('your-list-id');
// 将列表的子元素（所有<li>）转为数组并反转
const reversedItems = Array.from(targetList.children).reverse();
// 清空原列表
targetList.innerHTML = '';
// 把反转后的元素逐个添加回列表
reversedItems.forEach(item => targetList.appendChild(item));

方法2：用prepend逐个移动元素 #

这种方法不需要清空列表，直接通过prepend方法把每个元素移到列表开头，最终实现反转效果：

const targetList = document.getElementById('your-list-id');
// 获取所有列表项的数组
const items = Array.from(targetList.children);
// 遍历每个元素，将其移到列表开头
items.forEach(item => targetList.prepend(item));

小贴士：prepend是ES6新增的方法，如果你需要兼容非常老旧的浏览器（比如IE），可以用insertBefore替代，效果是一样的。

你的现有代码是用appendChild把新列表项添加到列表底部，只需要把这一步改成添加到列表开头的方法就行，这里有两种写法：

写法1：用prepend（推荐，简洁） #

修改代码的最后一行，把appendChild换成prepend：

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").prepend(list_element);
}

写法2：用insertBefore（兼容旧浏览器） #

如果需要适配不支持prepend的旧浏览器，可以用insertBefore方法，把新元素插入到列表的第一个子元素之前：

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);
    const todoList = document.getElementById("todo-list");
    // 插入到第一个子元素之前，实现顶部添加
    todoList.insertBefore(list_element, todoList.firstChild);
}

两种写法都能实现需求，选哪种取决于你的浏览器兼容性要求~

内容的提问来源于stack exchange，提问作者White Owl