点击自定义按钮后Flex项目消失问题求助

问题根源 #

你点击分类按钮的事件处理代码中，错误地将右侧Flex容器（#box-2）移动到了新建的<h1>元素内部：

item.appendChild(flex2)

DOM元素在页面中只能存在一个位置，执行这行代码后，#box-2会从原本的Flex容器中被移除，导致右侧区域直接消失。你的需求是把<h1>添加到#box-2里，而不是反过来。

修复方案 #

将代码逻辑反转，把新建的<h1>元素追加到#box-2中。同时建议使用textContent替代innerHTML，避免不必要的XSS风险：

修正后的JavaScript代码 #

//关闭分类命名弹窗的按钮
const closeButton = document.querySelector('#close-button')
//左侧flex item
const newFileBox = document.querySelector('#box-1')
//打开新建分类命名弹窗
const folderButton = document.querySelector('#new-folder-button')
//创建分类的表单
const createFolder = document.querySelector('#fileForm')
//展示分类按钮的列表
const fileList = document.querySelector('#file-list')
const input = document.querySelector('#file-name')
//右侧flex item
const flex2 = document.querySelector('#box-2')
let tab = '';

closeButton.addEventListener('click', () => {
    newFileBox.style.display = 'none';
})

folderButton.addEventListener('click', () => {
    newFileBox.style.display = 'block';
})

createFolder.onsubmit = (event) =>{
    event.preventDefault();
    tab = createFile(input.value)
    tab.addEventListener('click', () => {
        // 可选：每次点击前清空右侧容器内容，避免重复添加
        flex2.innerHTML = '';
        const item = document.createElement('h1')
        item.textContent = 'Games'
        flex2.appendChild(item)
    })
}

function createFile(text){
    const file = document.createElement('button')
    file.innerHTML = text;
    fileList.appendChild(file);
    return file;
}

额外说明 #

如果需要每次切换分类时清空右侧的旧内容，保留flex2.innerHTML = '';这行代码；如果希望保留历史内容，则可以删除该行。

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