Javascript中的待办事项列表-如何始终在列表顶部插入新项？

我有一个待办事项清单，看起来类似于：

用户应该键入任务，以便将其添加到列表中。与我链接到的内容不同，我希望最新的输入始终位于列表的顶部，而不是添加到列表的底部。我尝试过使用insertbefore（）函数，但不知道如何使其工作

这是我的密码：

tasks=[]；
函数addTask（）{
var li=document.createElement（“li”）；
//添加复选框
var cbox=document.createElement（'INPUT'）；
setAttribute（'type'，'checkbox'）；
li.儿童（cbox）；
setAttribute（'id'，'box'）；
//添加要做的事情
var inputValue=document.getElementById（“newTask”）.value；
var task=document.createTextNode（inputValue）；
李.儿童（任务）；
如果（inputValue==''）{
警惕（“你必须写点什么！”）；
}否则{
文件.getElementById（“列表”）.appendChild（li）；
}
//第三部分
任务推送（newTask.value）；
document.getElementById（“newTask”）。值=“”；
}
//防止违约
document.getElementById（“提交”）.addEventListener（“单击”，函数）（）{
event.preventDefault（）
});
正文{
宽度：600px；
保证金：自动；
背景：#699；
字体系列：garamond；
字体大小：20px；
}
保险商实验室{
列表样式类型：无；
填充：0；
边框：2件纯黑；
}
ulli{
填充顶部：15px；
垫底：15px；
字体大小：粗体；
}
字段集{
背景：天蓝色；
边框：2件纯黑；
}
第n个孩子（单数）{
背景色：天蓝色；
}
第n个孩子（偶数）{
背景色：白色；
}
ulli：悬停{
背景色：浅绿色；
}
#盒子{
利润率：0px 20px 0px；
}
待办事项列表
在下面的输入字段中添加任务








你好
要做的事情清单

而不是像这样出现在孩子面前

document.getElementById("list").appendChild(li);

只需在第一个孩子之前插入

像这样：

var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);

这里有一个非常明显的例子，您可以遵循：

而不是像这样对孩子示好

document.getElementById("list").appendChild(li);

只需在第一个孩子之前插入

像这样：

var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);

这里有一个非常明显的例子，您可以遵循：

由于这只是一个演示问题，我会将
更改为a，并使用以相反顺序显示任务列表


tasks=[]；
函数addTask（）{
var li=document.createElement（“li”）；
//添加复选框
var cbox=document.createElement（'INPUT'）；
setAttribute（'type'，'checkbox'）；
li.儿童（cbox）；
setAttribute（'id'，'box'）；
//添加要做的事情
var inputValue=document.getElementById（“newTask”）.value；
var task=document.createTextNode（inputValue）；
李.儿童（任务）；
如果（inputValue==''）{
警惕（“你必须写点什么！”）；
}否则{
文件.getElementById（“列表”）.appendChild（li）；
}
//第三部分
任务推送（newTask.value）；
document.getElementById（“newTask”）。值=“”；
}
//防止违约
document.getElementById（“提交”）.addEventListener（“单击”，函数）（）{
event.preventDefault（）
});
正文{
宽度：600px；
保证金：自动；
背景：#699；
字体系列：garamond；
字体大小：20px；
}
保险商实验室{
列表样式类型：无；
填充：0；
边框：2件纯黑；
/*增加*/
显示器：flex；
弯曲方向：柱反向；
}
ulli{
填充顶部：15px；
垫底：15px；
字体大小：粗体；
}
字段集{
背景：天蓝色；
边框：2件纯黑；
}
第n个孩子（单数）{
背景色：天蓝色；
}
第n个孩子（偶数）{
背景色：白色；
}
ulli：悬停{
背景色：浅绿色；
}
#盒子{
利润率：0px 20px 0px；
}
待办事项列表
在下面的输入字段中添加任务








你好
要做的事情清单

因为这只是一个演示问题，所以我会将
更改为a，并使用以相反顺序显示任务列表


tasks=[]；
函数addTask（）{
var li=document.createElement（“li”）；
//添加复选框
var cbox=document.createElement（'INPUT'）；
setAttribute（'type'，'checkbox'）；
li.儿童（cbox）；
setAttribute（'id'，'box'）；
//添加要做的事情
var inputValue=document.getElementById（“newTask”）.value；
var task=document.createTextNode（inputValue）；
李.儿童（任务）；
如果（inputValue==''）{
警惕（“你必须写点什么！”）；
}否则{
文件.getElementById（“列表”）.appendChild（li）；
}
//第三部分
任务推送（newTask.value）；
document.getElementById（“newTask”）。值=“”；
}
//防止违约
document.getElementById（“提交”）.addEventListener（“单击”，函数）（）{
event.preventDefault（）
});
正文{
宽度：600px；
保证金：自动；
背景：#699；
字体系列：garamond；
字体大小：20px；
}
保险商实验室{
列表样式类型：无；
填充：0；
边框：2件纯黑；
/*增加*/
显示器：flex；
弯曲方向：柱反向；
}
ulli{
填充顶部：15px；
垫底：15px；
字体大小：粗体；
}
字段集{
背景：天蓝色；
边框：2件纯黑；
}
第n个孩子（单数）{
背景色：天蓝色；
}
第n个孩子（偶数）{
背景色：白色；
}
ulli：悬停{
背景色：浅绿色；
}
#盒子{
利润率：0px 20px 0px；
}
待办事项列表
在下面的输入字段中添加任务








你好
要做的事情清单

在数组顶部插入新元素：

tasks.unshift(new_element);

将图元插入父图元内的第一个位置：

parent_element.insertBefore(new_element, parent_element.firstChild);

*请注意，如果
parent\u元素
为空，
parent\u元素.firstChild
将为
null
，而
insertBefore
方法将类似于
appendChild
方法。
在数组顶部插入新元素：

tasks.unshift(new_element);

将图元插入到中的第一个位置