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

问题描述

这里是JS新手，我正在尝试使用香草JS / HTML编写一个待办事项列表，其中单击“待办事项”中的元素可以将其结尾为“完成”。我已经使图标可点击，我设法将内容从一个div移到另一个div，但是我遇到了几个问题，而且我似乎找不到问题所在：

1：为什么当我（我认为）要求它仅移动<li id=todotask>时，我的JS脚本为什么将整个'doList'div移到'doneList'div中？这是父母的问题吗？（第24行）编辑：已解决

2：我到底如何只移动一个<li>元素，我单击的元素，而不移动其他元素？现在它们出现时都获得相同的ID，所以我想这将是一个问题，所以...编辑：已解决

3：有没有办法给每个<li>赋予不同的ID，并在单击后更改已移动的<li>元素的ID？

4：当我单击鼠标后终于在正确的div中获得<li>元素时，如何“重新启动”函数，以便输入的下一个<li>元素出现在“ todo”中而不是在我搬家之后“完成”？

这是到目前为止我已经阅读和尝试的内容：在我的moveItem函数中更改父项和子项，在创建<li>元素时给它一个ID，使用li.id和classList.remove / add，阅读至少50条关于如何将div相互移动的答案，但是没有找到任何符合我需要的内容，因为我想移动创建的<li> onclick并完成有了它，本身没有div移动，移动我的html中已经存在的元素或融合两个div的内容...

这是我的JS代码，我希望您可以通读我在这里想要实现的目标，这是我的第一篇文章，与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>

在移动元素前后，它在检查器上显示的内容是

之前：

之后：

我希望我不要浪费你的时间，你会以我的方式向新手伸出援助之手，谢谢！！

解决方法

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

appendchild function function javascript