使用带appendchild的javascript从一个div添加到另一个div（不工作）

嘿，我在尝试建立一个“网站”，你可以在其中添加和删除列表中的人，然后添加到另一个。添加可以工作，但删除不能正常工作。正如您所看到的，add and remove子句彼此非常相似，唯一的区别是

getElementById（）

let name=[]；
姓名[0]=“丹尼尔”；
姓名[1]=“安娜”；
姓名[2]=“莎拉”；
姓名[3]=“卡尔”；
姓名[4]=“Tim”；
姓名[5]=“西蒙”；
姓名[6]=“克拉拉”；
姓名[7]=“大卫”；
姓名[8]=“雨果”；
document.getElementById（“添加”）.addEventListener（“单击”，添加）；
document.getElementById（“删除”）.addEventListener（“单击”，删除）；
for（设i=0；i<9；i++）{
document.getElementById（“参与者”）.innerHTML++=“名称[i]+”；
}
for（设i=0；i<9；i++）{
document.getElementById（名称[i]）。addEventListener（“单击”，选中）；
}
函数选择（）{
让item=document.getElementById（this.id）；
if（item.classList.contains（“selected”））{
item.classList.remove（“Selected”）；
}否则{
项。类列表。添加（“选定”）；
}
}
函数add（）{
设arr=[]；
arr=document.getElementsByClassName（“已选择”）；
for（设i=0；i

如果您先添加项目，然后设置一个eventlistener，监听

单击父元素上的

，您可能会有更好的方法。根据目标，您将调度所选的

函数

您可以利用事件冒泡来实现这一点。当为

语句创建单独的

时，不能保证在for语句运行完成后元素会立即出现在DOM中

var participants = document.getElementById('participants');

participants.onclick = function(event){
   var id = event.target.id;

   if(id){
      let item = document.getElementById(this.id);
       if(item.classList.contains("chosen")){
          item.classList.remove("chosen");
        }else{             
          item.classList.add("chosen");

       }
 //... the rest of your code
   }
}

看，您可以将id参数传递给所选函数，这样您就有了正确的元素

这样：

之前

document.getElementById(names[i]).addEventListener("click",chosen)
.
.
.
function chosen() { 
        let item = document.getElementById(this.id);
        if(item.classList.contains("chosen"))
           item.classList.remove("chosen");
        else
           item.classList.add("chosen");
} 

之后

document.getElementById(names[i]).addEventListener("click",chosen(names[i])
.
.
.
function chosen(chosenId) { 
    const item = document.getElementById(chosenId);
    item.classList.toggle("chosen")
} 

在这样的情况下，尽量始终使用const变量，这会使代码更具可预测性您的代码中有几个错误，所选类在添加和删除项后没有清理，没有添加或删除所有元素。
以下是解决这些问题的方法。
我建议你重构它，让它更通用，如果你需要帮助的话

const names = ["Daniel", "Anna", "Sarah", "Karl", "Tim" ,"Simon", "Klara", "David"];

document.getElementById("add").addEventListener("click",add);

document.getElementById("remove").addEventListener("click",remove);



for(let i = 0; i < names.length; i++){
    document.getElementById("participants").innerHTML += "<div class='normal' id='"+names[i]+"'>"+names[i]+"</div>";

}
for(let i = 0; i < names.length; i++){

    document.getElementById(names[i]).addEventListener("click",chosen); 
}

function chosen(){
    let item = document.getElementById(this.id);

        if(item.classList.contains("chosen")){
            item.classList.remove("chosen");

        }else{
            item.classList.add("chosen");

        }

}

function add(){
    members = document.getElementById("members");
    Array.from(document.querySelectorAll(".chosen")).forEach((item)=> { 
        members.append(item)
        item.classList.remove("chosen");
    })  
}

function remove(){
    participants = document.getElementById("participants");
    Array.from(document.querySelectorAll(".chosen")).forEach((item)=> { 
        participants.append(item)
        item.classList.remove("chosen");
    })  
}

const name=[“丹尼尔”、“安娜”、“莎拉”、“卡尔”、“蒂姆”、“西蒙”、“克拉拉”、“大卫”]；
document.getElementById（“添加”）.addEventListener（“单击”，添加）；
document.getElementById（“删除”）.addEventListener（“单击”，删除）；
for（设i=0；i{
成员。追加（项目）
item.classList.remove（“Selected”）；
})  
}
函数删除（）{
参与者=document.getElementById（“参与者”）；
数组.from（document.queryselectoral（.selected））.forEach（（项）=>{
参与者。追加（项目）
item.classList.remove（“Selected”）；
})  
}
如果每个元素都有一个唯一的ID，那么您只需使用
document.querySelector（“#uniqueID”）
通过该ID进行选择，然后对该元素调用
.remove（）
。您可以用“代码>元素.Stand属性（‘ID’，‘值’）/代码>来设置DOM元素的ID，并且我不建议使用<代码>内文HTML ，考虑创建DOM元素，使用<代码>文档。CealElement（“DIV”）< /C> >，然后您可以使用<代码>内文本> /代码>来设置文本。更先进的技术是使用数组方法，比如
过滤器
，但我认为你还没有做到。完美的Yoshi，我会重构