时间戳

首页 > 解决方案 > 一个节点在 DOM 中不能有多个父节点；如何规避这个？

javascript - 一个节点在 DOM 中不能有多个父节点；如何规避这个？

问题描述

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

所以我有一堂课：

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

所以，每次我创建一个新的Folder时，我想在dropdownElement里面追加当前存在的所有 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);
        }
    }

效果很好！但是，如果用户更改标题Folder怎么办？或者如果用户删除Folder? 克隆人如何知道这种变化？

我一直在尝试提出一个简单的解决方案，但我就是找不到方法。

标签： javascriptdom

解决方案

推荐阅读