Javascript 节点可以'；t在DOM中没有多个父对象；如何规避？

假设我正在构建一个带有文件夹功能的Todo应用程序（我可以将Todo存储在文件夹中）

所以我有一门课：

class Folder{
    constructor(){
        this.title = "new folder";
        this.element = document.createElement("li"); // element that will show up in the Folder menu bar
        this.dropdownElement = document.createElement("li"); // element that will show up in EACH Todo box
     }
}

因此，每次我创建一个新的

文件夹

，我都想在当前存在的所有Todo元素中添加

下拉元素

，这样用户就可以选择Todo指向哪个文件夹

class Todo{
    constructor(){
        this.element = document.createElement("div"); // the todo box
    }

    static addNewFolderToDropdown(dropdownFolderElement){ 
        for(let todo of Todo.instances){ // loops through all the Todos the user has
            this.element.appendChild(dropdownFolderElement);
        }
    }
}

但是，问题是：

dropdownFolderElement

只能有一个父节点，因此它不能在每个Todo框中，只能有一个

所以我试了一下：

    static addNewFolderToDropdown(dropdownFolderElement){
        for(let todo of Todo.instances){
            const clone = dropdownFolderElement.cloneNode(true);
            this.element.appendChild(clone);
        }
    }

它工作得很好！但是，如果用户更改

文件夹的标题怎么办？或者，如果用户删除
文件夹
？克隆人如何知道这种变化

我一直试图想出一个简单的解决办法，但就是找不到办法
 这就是为什么您应该创建内容的模型。将Todo存储在数据结构中，克隆视图节点，更新模型，删除Todo时，您可以使用存储的数据找到所有节点。@Teemu非常感谢您的回答！你是说文件夹，对吗？所以我应该创建一个包含所有克隆的数组，当用户编辑或删除文件夹标题时，我会迭代所有克隆，对吗？类似的，甚至可能是一个反映文件夹结构的对象，有重命名和删除的方法，以及您对项目执行的任何任务。@Teemu我这样做了；但是，当我编辑单个文件夹的标题时，它会编辑所有文件夹的“下拉元素”标题。。。我认为当我将克隆推送到阵列时，它们最终都是一样的。我应该克隆最后一个克隆人吗？@Teemu没关系，愚蠢的错误！它起作用了。。。谢谢这就是为什么您应该创建内容的模型。将Todo存储在数据结构中，克隆视图节点，更新模型，删除Todo时，您可以使用存储的数据找到所有节点。@Teemu非常感谢您的回答！你是说文件夹，对吗？所以我应该创建一个包含所有克隆的数组，当用户编辑或删除文件夹标题时，我会迭代所有克隆，对吗？类似的，甚至可能是一个反映文件夹结构的对象，有重命名和删除的方法，以及您对项目执行的任何任务。@Teemu我这样做了；但是，当我编辑单个文件夹的标题时，它会编辑所有文件夹的“下拉元素”标题。。。我认为当我将克隆推送到阵列时，它们最终都是一样的。我应该克隆最后一个克隆人吗？@Teemu没关系，愚蠢的错误！它起作用了。。。谢谢