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

Question

我正在尝试制作一个非常简单的“待办事项”列表应用程序。 但是我无法将我的列表项从“待办事项”列表移动到“完成”列表。

任何帮助将不胜感激。

到目前为止，这是我的代码。

HTML

<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>

JS

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();
    });
}

Answer 1

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

 function moveItem() { const origin = document.getElementById('origin'), target = document.getElementById('target'), el = origin.firstElementChild; if (el) target.append(el); }

 <div id="container"> <input type="button" onclick="javascript:moveItem()" value="move 1 li from origin to target" /><br> <span>Origin</span> <ul id="origin"> <li>Origin entry 1</li> <li>Origin entry 2</li> <li>Origin entry 3</li> </ul> <br> <span>Target</span> <ul id="target"> </ul> </div>

Answer 2

您在点击内部添加点击，这是没有意义的，并且您以某种方式将 DOM 视为 jQuery，因为没有 click() 方法。 您也在调用 text() 并且 DOM 中没有 text 方法。

您只需要选择被单击的 li 并将其移动到另一个列表中。

 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(evt) { evt.preventDefault(); // get the button that was clicked var btn = evt.target; // find the parent li element var li = btn.closest("li"); // remove the button btn.remove(); // add the li to the other list // an element can only live in one place so it is removed from list1 document.getElementById("list2").appendChild(li); }

 <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>

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

问题描述

2 个解决方案

解决方案1
2 2020-11-10 13:42:03

解决方案2
0 2020-11-10 13:41:01

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

问题描述

2 个解决方案

解决方案1 2 2020-11-10 13:42:03

解决方案2 0 2020-11-10 13:41:01

解决方案1
2 2020-11-10 13:42:03

解决方案2
0 2020-11-10 13:41:01