在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