点击add按钮新div不显示？图片上传项目技术求助

这是一个图片添加项目，需求是点击带有add类的按钮时，在该按钮之前创建更多图片加载框。目前点击按钮时控制台日志能正常输出，但innerHTML的修改不生效，求代码改进建议。

原代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
    <script src="https://kit.fontawesome.com/9f2b728e62.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="box upload">
            <div class="cir">
                <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
            </div>
        </div>
        <button class="box add" onclick="addMore()">
            <div class="cir">
                <i class="fa-solid fa-plus fa-fade fa-2xl" style="color: #ffffff;"></i>
            </div>
        </button>
    </div>
</body>
</html>

CSS #

body {
    background: rgb(112,50,154);
    background: linear-gradient(158deg, rgba(112,50,154,1) 9%, rgba(29,126,253,1) 100%);
    margin: 0;
    padding: 0;
    display: flex;
}

.container {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
}

.box{
    background-color: rgb(100, 0, 100);
    border: 1px solid rgb(183, 79, 183);
    border-radius: 10px;
    width: 157px;
    height: 200px;
    margin: 10px 10px 10px 10px ;
    display: flex;
    justify-content: center;
    align-items: center;

}

.add {
    opacity: 70%;
}

.cir {
    background-color: rgba(250, 235, 215, 0.408);
    width: 100px;
    height: 100px;
    border-radius: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

JavaScript #

const container = document.getElementsByClassName('container')
const add = document.getElementsByClassName('add')


function addMore(){
    container.innerHTML += `
    <div class="box upload">
        <div class="cir">
            <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
        </div>
    </div>

    `
    console.log('done')
}

核心问题 #

document.getElementsByClassName()返回的是HTMLCollection类数组对象，不是单个DOM元素，直接访问container.innerHTML会因为集合没有该属性而失效（控制台会有对应报错，只是未被注意）。另外，用innerHTML +=会重新渲染容器内所有元素，效率低且可能丢失事件绑定，同时无法精准控制插入位置到按钮之前。

修正后的代码 #

JavaScript #

// 获取单个容器和按钮元素，querySelector返回匹配的第一个元素
const container = document.querySelector('.container');
const addBtn = document.querySelector('.add');

// 用事件监听替代内联onclick，避免全局函数污染
addBtn.addEventListener('click', addMore);

function addMore() {
    // 定义要插入的HTML结构
    const newUploadBox = `
        <div class="box upload">
            <div class="cir">
                <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
            </div>
        </div>
    `;
    // 在add按钮之前插入新元素，insertAdjacentHTML更高效且位置精准
    addBtn.insertAdjacentHTML('beforebegin', newUploadBox);
    console.log('done');
}

HTML（移除内联onclick） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
    <script src="https://kit.fontawesome.com/9f2b728e62.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="box upload">
            <div class="cir">
                <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
            </div>
        </div>
        <button class="box add">
            <div class="cir">
                <i class="fa-solid fa-plus fa-fade fa-2xl" style="color: #ffffff;"></i>
            </div>
        </button>
    </div>
    <!-- 建议把JS放在body末尾，确保DOM加载完成 -->
    <script src="你的JS文件名.js"></script>
</body>
</html>

• 元素获取：优先使用querySelector/querySelectorAll，语法更灵活（支持类、ID、标签等选择器），返回结果更易处理。
• 事件绑定：避免内联onclick，用addEventListener可以绑定多个事件，代码更模块化，也不会污染全局作用域。
• DOM操作：尽量避免频繁使用innerHTML拼接，改用insertAdjacentHTML、createElement等方法，性能更好且能精准控制元素位置。
• 代码结构：把JS代码放在body标签末尾，或者用DOMContentLoaded事件包裹，确保DOM元素加载完成后再执行JS，避免获取不到元素的问题。
• 变量命名：用更语义化的名字，比如addBtn代替add，可读性更强。

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