JavaScript如何通过单个输入框生成多个输入框并获取全部值

原代码无法正确获取所有输入框值，由两个核心逻辑错误导致：

• 反复通过innerHTML +=追加内容时，浏览器会重新解析渲染demo2下的所有DOM，已生成输入框的已输入内容、绑定状态都会被重置
• 取值逻辑写死了取multipleInput[0]也就是第一个匹配类名的输入框值，无论哪个输入框触发回车事件，都只会读取第一个输入框的内容

HTML部分（原有代码无需调整，保持如下即可） #

<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="style.css">
       <title>Coding</title>
</head>
<body>
       <input type="text" id="singleInput">
       <div id="demo">
          <p id="demo2"></p>
       </div>
       <script src="script.js"></script>
</body>
</html>

JavaScript修正代码 #

const singleInput = document.getElementById('singleInput')
const demo2 = document.getElementById('demo2')
const multipleInputValue = []

singleInput.addEventListener('keyup', function (event) {
       if (event.key === 'Enter' && singleInput.value.trim()) {
              // 创建文本节点展示输入的标签内容，避免innerHTML重绘问题
              const labelText = document.createTextNode(singleInput.value)
              // 创建新的数字输入框
              const newInput = document.createElement('input')
              newInput.type = 'number'
              newInput.className = 'multipleInput'
              // 直接给新输入框绑定回车取值事件
              newInput.addEventListener('keyup', getValue)
              // 追加换行符
              const br = document.createElement('br')

              // 按顺序把节点插入容器
              demo2.append(labelText, newInput, br)
              // 清空初始输入框，方便下次输入
              singleInput.value = ''
       }
})

function getValue(event) {
       if (event.key === 'Enter' && event.target.value.trim()) {
              // 直接读取当前触发事件的输入框的值，不需要通过类名集合取固定索引
              multipleInputValue.push(event.target.value)
              // 调试用：控制台可查看已收集的所有输入值
              console.log('当前收集到的所有输入值：', multipleInputValue)
       }
}

• 改用createElement+append的方式新增节点，不会重绘已有DOM，不会丢失之前输入框的已输入内容
• 每个新生成的输入框单独绑定事件，取值时直接通过event.target拿到当前操作的输入框实例，读取对应值即可
• 新增空值校验，避免无效输入生成空标签、存入空数据

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