如何在不移动整个 <div1> 的情况下将 <div1> 的创建内容移动到 <div2> 并继续在 <div1> 中创建元素？

Question

我正在尝试使用原版 JS/Html 编写一个待办事项列表，其中“待办事项”中的元素在单击时可以在“完成”中结束。我已将我的图标设置为可点击，我已设法将内容从一个 div 移动到另一个，但我有几个问题，我似乎无法找到问题所在：

1：为什么我的 JS 脚本将我的整个 'doList' div 移动到我的 'doneList' div 中，而我（以为我）要求它移动 <li id=todotask> 只有？是 parent 问题吗？（第 24 行）

2：我如何设法只移动一个 <li> 元素，即我单击的那个元素，而不移动其他元素？现在他们在出现时都获得相同的 ID，所以我想这将是一个问题，所以...

3: 有没有办法可以给每个 <li> 一个不同的 ID，并在我点击后更改移动的 <li> 元素的 ID？

4：当我最终在单击后在右侧 div 中获得我的 <li> 元素时，我如何“重新启动”我的功能以便我放入下一个 <li> 元素输入出现在“待办事项”中，而不是在我移动的那个之后出现在“完成”中？

这是我到目前为止阅读和尝试过的内容：更改我的 moveItem 函数中的 parent 和 child，在创建时为我的 <li> 元素提供一个 ID，使用 li.id 和 classList.remove/add 删除和添加 ID，阅读至少 50 个关于如何将 div 移动到另一个的 SO 答案，但没有找到任何符合我需要的东西，因为我想移动一个 .createElement 创建的 <li> onclick 并完成它，而不是 div 自己移动，移动已经在我的 html 中的元素或融合内容两个 divs...

这是我的 JS 代码：

function newItem() {
  console.log("Inside newItem")

  //set variables
  let item = document.getElementById("taskinput").value;
  let ul = document.getElementById('doList');
  let li = document.createElement('li');
  li.id = 'todotask';

// now put text in list item
  li.appendChild(document.createTextNode(item));
  ul.appendChild(li); // put list item in our unordered list
  document.getElementById("taskinput").value = ""; // erase what is currently in todo
  li.onclick = moveItem; // run moveItem when the li is clicked
}

function moveItem(e) {
  var moveTo = this.parentElement.parentElement == doneList ? todotask : doneList;
  moveTo.appendChild(this.parentElement);
  console.log("Item Moved to Done")
}

document.body.onkeyup = function(e) {

  let item = document.getElementById("taskinput").value;
  if (e.keyCode == 13) {
    console.log('enter pressed!');
    newItem();
    console.log(item);
  };
};

document.getElementById('addtask').onclick = function() {
  console.log('Add button pressed!')
  newItem()
}

<body>

  <div class="container">
    <div>
      <h1>To Do List</h1>
    </div>

    <div id="addtaskbar">
      <input type="text" name="taskinput" id="taskinput" placeholder="What do you have to do next?">
      <input type="button" name="addtask" id="addtask" value="Add">
    </div>
  </div>
  <div class="container">
    <div id="todo">
      <ul id='doList'>

      </ul>
    </div>

    <div id="done">
      <ul id='doneList'>

      </ul>

    </div>
  </div>

这是我移动元素之前和之后在检查器上显示的内容：

之前：

之后：

Answer 1

在moveItem中，this就是ul。所以你应该移动 this，而不是 this.parentElement。

此外，doList 或 doneList 将是元素的父元素，而不是祖父元素，因此您需要更改三元表达式中的条件。

而后退时的目的地应该是doList，todotask是具体任务的ID。您也不应该像那样创建重复的 ID。无需为动态创建的任务提供 ID。

function newItem() {
  console.log("Inside newItem")

  //set variables
  let item = document.getElementById("taskinput").value;
  let ul = document.getElementById('doList');
  let li = document.createElement('li');

  // now put text in list item
  li.appendChild(document.createTextNode(item));
  ul.appendChild(li); // put list item in our unordered list
  document.getElementById("taskinput").value = ""; // erase what is currently in todo
  li.onclick = moveItem; // run moveItem when the li is clicked
}

function moveItem(e) {
  var moveTo = this.parentElement == doneList ? doList : doneList;
  moveTo.appendChild(this);
  console.log("Item Moved to " + (moveTo == doneList ? "Done" : "ToDo"))
}

document.body.onkeyup = function(e) {

  let item = document.getElementById("taskinput").value;
  if (e.keyCode == 13) {
    console.log('enter pressed!');
    newItem();
    console.log(item);
  };
};

document.getElementById('addtask').onclick = function() {
  console.log('Add button pressed!')
  newItem()
}

<body>

  <div class="container">
    <div>
      <h1>To Do List</h1>
    </div>

    <div id="addtaskbar">
      <input type="text" name="taskinput" id="taskinput" placeholder="What do you have to do next?">
      <input type="button" name="addtask" id="addtask" value="Add">
    </div>
  </div>
  <div class="container">
    To Do
    <div id="todo">
      <ul id='doList'>

      </ul>
    </div>
    Done:
    <div id="done">
      <ul id='doneList'>

      </ul>

    </div>
  </div>

如何在不移动整个 <div1> 的情况下将 <div1> 的创建内容移动到 <div2> 并继续在 <div1> 中创建元素？

How can I move the created content of a <div1> into a <div2> without moving the whole <div1> and keep creating elements in <div1>?

javascript

function

appendchild