Javascript 如何将一个li前置到另一个li的顶部

我正在根据用户输入创建元素列表。此列表中的每个元素在我的JavaScript中都有一个动态创建的按钮

我正试图让它这样，当我点击这个动态创建的按钮开始，它会自动删除整个列表元素从原来的李，并将其移动到另一个李的顶部

我的代码：[编辑：出于某种原因，我的代码段没有显示第二个列表，但它显示在我的本地控制台中，不确定我的代码是否有问题？]

//在用户输入文本并单击类似于“提交”的按钮后，使用“已启动”按钮动态创建一个新的li元素 $document.ready $new item.“单击”功能{ //加载文档后，使用此功能创建新项 var text=$'task'.val； 如果文本！={ $'todo-list'。已开始预结束+text++； } } ; $。添加任务。单击按钮，功能{ var completedItem=$this.parent； $'DO-list'。追加$'todo-list'completedItem.removeClasscompletedItem； }; 标题{ 背景色：026aa7； 高度：30px； 文本对齐：居中； 填充：5px 8px； } 标题a{ 高度：30px； 宽度：80px； 文本对齐：居中； 背景图像：urlhttps://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png; 背景重复：无重复； 文本对齐：居中； 显示：内联块； 背景尺寸：80px 30px； } 身体{ 背景色：0078c0； 边际：0px； 字体系列：无衬线； } 李{ 列表样式类型：无； 左边距：8px； 文本缩进：10px； /*光标：指针*/ } 李：悬停{ 背景：ddd； } 李安补充道{ 边框：1px纯白； 边界半径：4px； 填充：15px； 宽度：83%； 背景色：白色； } 开始{ 浮动：左； 背景色：白色； 边界半径：6px； } .栏目{ 背景色：E3； 最小高度：100px； 宽度：25%； 盒子阴影：1px 1px 3px$shadow； 显示：内联块； 职位：asolute； 保证金：5px； 垂直对齐：顶部； 位置：相对位置； 顶部：75px； 右：287px； 边界半径：5px； } .第h1列{ 字体大小：20px； 左侧填充：10px； 位置：相对位置； 底部：.5px； 颜色：3939； 保证金：5px； } 新项目{ 位置：相对位置； 左：40px； 顶部：20px； 字体系列：无衬线； 填充：4px； 宽度：100px； 背景色：ffffff； 边界半径：4px； } 任务{ 位置：相对位置； 左：25px； 顶部：20px； 高度：20px； 宽度：200px； 填充：10px； 边界半径：4px； 左侧填充：4px； } HW03 Javascript和jQuery 加一张卡片 做 做

---

由于您稍后将向DOM添加HTML，因此代码$.addedTask.on'click'，button，函数{将不起作用，因为在执行此代码时没有.addedTask元素

相反，您可能希望将其委托给DOM中更高的节点

$document.on'click'，.addedTask按钮，函数{

您使用了错误的选择器。为事件委派添加了任务。 使用prepend函数在顶部添加元素。 若要测试此代码段，请在单击“运行代码段”后单击整个页面

//在用户输入文本并单击类似于“提交”的按钮后，使用“已启动”按钮动态创建一个新的li元素 $document.ready $new item.“单击”功能{ //加载文档后，使用此功能创建新项 var text=$'task'.val； 如果文本！={ $'todo-list'。已开始预结束+text++； } } ; $todo列表。单击按钮，功能{ var completedItem=$this.parent； $'DO-list'。在$completedItem前加上前缀； }; 标题{ 背景色：026aa7； 高度：30px； 文本对齐：居中； 填充：5px 8px； } 标题a{ 高度：30px； 宽度：80px； 文本对齐：居中； 背景图像：urlhttps://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png; 背景重复：无重复； 文本对齐：居中； 显示：内联块； 背景尺寸：80px 30px； } 身体{ 背景色：0078c0； 边际：0px； 字体系列：无衬线； } 李{ 列表样式类型：无； 左边距：8px； 文本缩进：10px； /*光标：指针*/ } 李：悬停{ 背景：ddd； } 李安补充道{ 边框：1px纯白； 边界半径：4px； 填充：15px； 宽度：83%； 背景色：白色； } 开始{ 浮动：左； 背景色：白色； 边界半径：6px； } .栏目{ 背景色：E3； 最小高度：100px； 宽度：25%； 盒子阴影：1px 1px 3px$shadow； 显示：内联块； 职位：asolute； 保证金：5px； 垂直对齐：顶部； 位置：相对位置； 顶部：75px； 右：287px； 边界半径：5px； } .第h1列{ 字体大小：20px； 左侧填充：10px； 位置：相对位置； 底部：.5px； 颜色：3939； 保证金：5px； } 新项目{ 位置：相对位置； 左：40px； 顶部：20px； 字体系列：无衬线； 填充：4px； 宽度：100px； 背景色：ffffff； 边界半径：4px； } 任务{ 位置：相对位置； 左：25px； 顶部：20px； 高度：20px； 宽度：200px； 填充：10px； 边界半径：4px； 左侧填充：4px； } HW03 Javascript和jQuery 加一张卡片 做 做

---

是的，这很有效，非常感谢！我会在几分钟内解决这个问题，因为现在不允许我这么做。