为什么这个 div 节点不是容器的子节点？

Question

开发 Etch-A-Sketch - 我使用 2 个 for 循环创建了一个 16*16 的网格 - 一个嵌套在另一个中。

        const div =  document.createElement('div');
        div.style.cssText = 'flex: 1';
        container.appendChild(div);
        // div.addEventListener('mouseover', changeBackground);
        for (let j = 0; j < 16; j++){
            const div2 = document.createElement('div');
            div2.classList.add('square');
            div.style.display = 'flex';
            div.appendChild(div2);

在这个 for 循环中，我创建了一个 div 并将其分配给const div然后将其作为 CHILD 节点附加到容器中 - const container = document.querySelector('.container'); . 在内部 for 循环const div2 = document.createElement('div'); 被分配为外循环中const div的子项，因为 div2 是网格上的正方形。 所以 DOM 树看起来像这样：

——

目前我想要做的是设置一个事件侦听器，当用户单击按钮时将触发该事件侦听器，让他们可以选择设置他们选择的网格 - （即提示他们输入 2 和64，然后以类似的方式我想迭代循环变量 i 和 j - 与用户输入建议的次数一样多，然后生成输入 * 输入网格。但是，我需要做的第一件事是清除其现有网格16 * 16 个方块 - 所以这就是我决定使用removeChild()方法并从container删除const div并从const div删除const div2地方。我能够成功调用和删除div.removeChild(div2); 。但是我遇到了一个错误 - Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node , when I run container.removeChild(div); 。我已经查找了有点错误并且已经看到您无法使用removeChild()方法删除后代 r 来自上面的 DOM 树，我非常确定div是container元素的子元素。 所以我的问题是：这个错误的原因是什么，我该如何修复它？ 它是否与具有自己的父级container有关 - containerBorder ？

              //sets grid depending on what number the user specifies.
                container.removeChild(div);
                // let userPrompt = prompt('Generate a grid: Enter a number between 2 and 100: ');
                // let input = Number.parseInt(userPrompt, 10);
                // container.removeChild(div);
                // div.removeChild(div2);
                // console.log(typeof input);
                // for(let i = 0; i < 16; i++){
                //     let div = document.createElement('div');
                //     div.style.cssText = 'border: 1px solid black; flex: 1';
                //     container.appendChild(div);

                //     for (let j = 0; j < 16; j++){
                //         let div2 = document.createElement('div');
                //         div2.classList.add('square');
                //         div2.style.display = 'flex';
                //         div.appendChild(div2);
                //     }
                // }

            });  

完整代码在这里 - https://codepen.io/safdari/pen/oNXJBGY

Answer 1

container.innerHTML = ''将清除容器并允许我重新渲染它