在香草JavaScript中将LI从一个UL移动到另一个UL？_Javascript

在香草JavaScript中将LI从一个UL移动到另一个UL？

javascript

在香草JavaScript中将LI从一个UL移动到另一个UL？,javascript,Javascript,我正在尝试制作一个非常简单的待办事项列表应用程序。但我在将列表项从待办事项列表移动到已完成列表时遇到问题任何帮助都将不胜感激这是到目前为止我的代码 HTML JS 您在click中添加了一个click，这毫无意义，而且您以某种方式将DOM视为jQuery，因为没有click方法。您也在调用text，而DOM中没有text方法您只需选择单击的li并将其移动到其他列表函数addToDo{ var输入=document.getElementByIdinput.value+； var list

我正在尝试制作一个非常简单的待办事项列表应用程序。但我在将列表项从待办事项列表移动到已完成列表时遇到问题

任何帮助都将不胜感激

这是到目前为止我的代码

HTML

您在click中添加了一个click，这毫无意义，而且您以某种方式将DOM视为jQuery，因为没有click方法。您也在调用text，而DOM中没有text方法

您只需选择单击的li并将其移动到其他列表

函数addToDo{ var输入=document.getElementByIdinput.value+； var list=document.getElementByIdlist1； var li=document.createElementli； li.className=已选择； var doneButton=document.createElementbutton； doneButton.innerHTML=完成； doneButton.onclick=moveToDo； doneButton.className=move； li.appendChilddocument.createTextNodeinput； li.donebutton；李斯特； } 函数moveToDoevt{ 预防违约； //获取已单击的按钮 var btn=evt.target； //查找父li元素 var li=btn.closestli； //卸下按钮删除； //将li添加到其他列表中 //一个元素只能存在于一个位置，因此它将从列表1中删除 document.getElementByIdlist2.appendChildli； } 添加做多恩

无需创建和删除，追加现有元素将移动它：

功能移动项{ 常数 origin=document.getElementById'origin'， target=document.getElementById'target'， el=origin.firstElementChild；如果el target.appendel； } 起源原产地条目1 原产地条目2 原产地条目3 目标

删除document.querySelector.move.clickfunction{，这是用于添加click事件处理程序的不正确语法，以及doneButton.onclick=moveToDo；，这是一个旧的语法，只需使用doneButton.addEventListener'click'，moveToDo；这是否回答了您的问题？DOMA代码段中没有文本方法可能有用。添加了@Absolute初学者。

<html>
<head>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/css.css">
    <title>Inlämingsuppgift</title>
</head>
<body>
    
    <input type="text" id="input" placeholder="Add a to-do"></input> <button onclick="addToDo()">Add</button>
    <h1>To do</h1>
    <ul id="list1">
    </ul>
    <h1>Done</h1>
    <ul id="list2">
    </ul>
</body>

function addToDo() {
    var input = document.getElementById("input").value + " ";
    var list = document.getElementById("list1");
    var li = document.createElement("li");
    li.className = "selected";
    var doneButton = document.createElement("button");
    doneButton.innerHTML = "Done";
    doneButton.onclick = moveToDo;
    doneButton.className = "move";
    li.appendChild(document.createTextNode(input));
    li.appendChild(doneButton);
    list.appendChild(li);
}

function moveToDo() {
    document.querySelector('.move').click(function() {
        document.querySelector('#list2').insertAdjacentHTML("beforeend",'<li>', document.querySelector('#list1 .selected').text(), '</li>');
        document.querySelector('#list1 .selected').remove();
    });
}