JS动态增删DOM元素时二次appendChild失效问题求助

你的代码核心问题出在reset()函数里：它直接把box-wrapper整个元素从DOM中删除了，而不是只清空它的子元素。当第二次调用create()时，document.getElementById("box-wrapper")找不到这个元素，返回null，此时调用appendChild()自然会报错。

另外还有两个隐性问题：

• pixels()函数每次调用都会给input绑定新的input事件监听，多次调用后会重复触发事件处理逻辑
• 循环变量i没有用let声明，会变成全局变量，可能引发意外问题

1. 修正reset函数，保留box-wrapper容器 #

把删除父元素的逻辑改成清空子元素，这样容器始终存在，后续appendChild可以正常执行。

2. 优化事件监听，避免重复绑定 #

把input的事件监听移到初始化代码中，只绑定一次。

3. 声明循环变量，避免全局污染 #

给循环里的i加上let声明。

// 初始化input事件监听，只执行一次
const value = document.querySelector("#value");
const input = document.querySelector("#pixels");
value.textContent = input.value;
input.addEventListener("input", (event) => {
    value.textContent = event.target.value;
});

function pixels() {
    return input.value;
}

function create() {
    const elements = document.getElementsByClassName('box');
    const z = elements.length;
    const a = pixels();
    const b = a * a;
    const c = (1 / a) * 100;

    if (z === 0) {
        const boxWrapper = document.getElementById("box-wrapper");
        for (let i = 1; i < (b + 1); i++) { // 用let声明i，避免全局变量污染
            const box = document.createElement("div");
            box.innerHTML = '1';
            box.style.backgroundColor = "lightgreen"; // 修正CSS颜色值写法，原"light green"无效
            const input_percen = c + "%";
            box.style.width = input_percen;
            box.style.height = input_percen;
            box.classList.add("box");
            box.addEventListener('mouseover', function onMouseover(event) {
                event.target.style.backgroundColor = 'black';
            });
            boxWrapper.appendChild(box);   
        }
    } else {
        reset();
    }
}

function reset() {
    const boxWrapper = document.getElementById("box-wrapper");
    // 清空子元素，保留box-wrapper容器本身
    while (boxWrapper.firstChild) {
        boxWrapper.removeChild(boxWrapper.firstChild);
    }
    create();
}

额外修复点 #

• 把light green改成lightgreen，因为CSS颜色值不支持空格分隔的写法，原代码的背景色设置实际不生效。

内容的提问来源于stack exchange，提问作者Eduardo Vianna