上下移动列表项的Javascript问题

最近开始学习javascript，我正在尝试构建一个简单的应用程序，这是一个ul，带有列表项，每个li有两个按钮，可以上下移动该li

但是，我遇到了问题。列表中的最后一项永远不能上移

var ul=document.querySelector（'ul'）；
ul.addEventListener（'点击'，（e）=>{
让点击=e.目标；
让li=clicked.parentNode；
设next=li.nextElementSibling.nextElementSibling；
设prev=li.previouselement同级；
如果（clicked.className==='down'）{
ul.removeChild（李）；
ul.插入前（李，下）；
}else if（clicked.className==='up'）{
ul.removeChild（李）；
ul.插入前（李，前）；
}
});

项目1下移上移
项目2下移上移
项目3下移上移
项目4下移上移
项目5下移上移
如果您检查浏览器控制台（F12可在大多数浏览器中打开开发工具），您将看到如下错误：

Uncaught TypeError: Cannot read property 'nextElementSibling' of null

这是因为在这条线上：

li.nextElementSibling.nextElementSibling;

…最后一个元素的
.nextSibling
为
null
（它没有下一个同级）。您需要测试
null
，而不仅仅是在末尾链接一个额外的
.nextElementSibling
：


var ul=document.querySelector（'ul'）；
ul.addEventListener（'点击'，（e）=>{
让点击=e.目标；
让li=clicked.parentNode；
让next=li.nextElementSibling；//注意，这会导致上排的
向上移动
。@Paulpro-OP的原始代码也会出现这种情况。我不确定这是否是故意的。此外，您的答案没有错，但我有一些随机建议，如果您愿意，可以添加到OP中u want.1）可以删除对
removeChild
的调用，因为它们后面总是跟着
insertBefore
，这会将
li
节点从DOM中的任何位置移动。2）
const
比
let
对所有这些变量更有意义（并尽可能用作默认值），
let
表示以后可能会修改它们。@Paulpro-实际上我只是在编辑以删除
.removeChild（）
行中有一个注释。我同意
const
与
let
的比较，但这更符合一般风格，因此我认为您的评论足够了，而不是将其放在答案中。每次调用函数时，它都会得到一组新的局部变量，这些变量不会在调用之间保留。在我的ans中的代码中wer，
下一个
变量可能会在
if
语句中重新赋值，因此它不能是
常量
，但其他变量可以是。