document.createElement无效果求助：为学校网站项目添加文本框

嘿，我太懂你这种踩坑的感觉了！document.write在页面加载完成后调用确实会直接覆盖整个页面，这玩意儿也就适合页面初始化的时候用，完全不是动态添加元素的正确姿势。至于你用document.createElement没生效，大概率是创建了元素但没把它添加到DOM树里——就像你做了个零件，没装到机器上，机器当然不会运行啦！

我给你整理了一套完整的可行方案，包含初始3个文本框和添加按钮的逻辑，你可以直接参考：

<!DOCTYPE html>
<html>
<head>
    <style>
        .input-container {
            margin-top: 50px;
        }
        .text-input {
            margin: 8px 0;
            padding: 6px;
            width: 280px;
        }
        #add-btn {
            float: left;
            margin-top: 10px;
            padding: 8px 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 用来存放所有文本框的容器 -->
    <div class="input-container" id="inputContainer"></div>
    <!-- 添加按钮 -->
    <button id="add-btn">添加更多文本框</button>

    <script>
        // 获取存放文本框的容器元素
        const inputContainer = document.getElementById('inputContainer');

        // 封装创建文本框的复用函数
        function createTextInput() {
            const input = document.createElement('input');
            input.type = 'text';
            input.className = 'text-input'; // 绑定样式类
            return input;
        }

        // 初始化创建3个默认文本框
        for (let i = 0; i < 3; i++) {
            inputContainer.appendChild(createTextInput());
        }

        // 给添加按钮绑定点击事件
        document.getElementById('add-btn').addEventListener('click', function() {
            inputContainer.appendChild(createTextInput());
        });
    </script>
</body>
</html>

关键细节说明： #

• 容器的作用：先在HTML里定义一个专门的容器，所有动态创建的文本框都往这里面加，能保证元素都出现在页面指定位置，不会混乱。
• 挂载DOM树是核心：document.createElement只是在JS内存里创建了元素，必须用appendChild()把它添加到页面的容器中，浏览器才会把它渲染出来。
• 复用函数更高效：把创建文本框的逻辑封装成函数，不管初始创建还是点击添加都调用它，避免重复写冗余代码。
• 事件绑定的正确姿势：用addEventListener给按钮绑定点击事件，比直接写onclick属性更灵活，也符合现代JS的编码习惯。

你可以把自己原来的CSS样式替换到示例的样式部分，调整成你需要的布局效果就行。

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