如何用JavaScript实现点击按钮每次新增一个文本框？

你的问题出在代码里用了innerHTML = Html，这会把id="b"的div内容直接替换成新的文本框，而不是追加。所以每次点击都会覆盖掉之前的，自然只会显示一个。

给你两种解决方式：

方式1：修改innerHTML为追加模式 #

给每个输入框加个唯一id避免重复（重复id不符合HTML规范，会导致后续操作出问题）：

<button id="a" onclick="c()"></button>
<div id="b"></div>

<script>
let inputCount = 0;
function c() {
    inputCount++;
    // 用模板字符串更简洁，也可以继续用字符串拼接
    const html = `<input type="text" id="input-${inputCount}">`;
    // 用 += 追加内容，而不是 = 替换
    document.getElementById('b').innerHTML += html;
}
</script>

方式2：用DOM API创建元素（更推荐） #

这种方式比直接操作innerHTML更规范，也更灵活：

<button id="a" onclick="c()"></button>
<div id="b"></div>

<script>
let inputCount = 0;
function c() {
    inputCount++;
    // 创建input元素
    const input = document.createElement('input');
    input.type = 'text';
    input.id = `input-${inputCount}`;
    // 把元素追加到目标div里
    document.getElementById('b').appendChild(input);
}
</script>

如果不需要id的话，直接去掉id相关代码就行，每次点击都会新增一个独立的文本框。

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