如何在动态创建的输入框输入时实时更新动态创建的div内容

我来帮你搞定这个同步更新的需求！核心思路就是给每个动态生成的输入框绑定一个实时监听事件，当输入内容变化时，精准找到它对应的Div并更新内容。下面用原生JavaScript给你写一个完整可运行的示例，一看就懂：

实现步骤与代码示例 #

1. 先搭好基础HTML结构 #

<!-- 用来指定生成数量的输入区 -->
<div>
  <label>输入要生成的组件数量：</label>
  <input type="number" id="countInput" min="1" value="1">
  <button id="generateBtn">生成组件</button>
</div>

<!-- 动态生成的组件容器 -->
<div id="componentsContainer"></div>

2. 编写JavaScript逻辑 #

// 获取关键DOM元素
const countInput = document.getElementById('countInput');
const generateBtn = document.getElementById('generateBtn');
const container = document.getElementById('componentsContainer');

// 生成组件的函数
function generateComponents(count) {
  // 先清空容器，避免重复生成
  container.innerHTML = '';

  // 循环生成对应数量的div和input对
  for (let i = 0; i < count; i++) {
    // 创建Div元素
    const contentDiv = document.createElement('div');
    contentDiv.className = 'content-div';
    contentDiv.textContent = '输入内容会同步到这里';
    contentDiv.style.margin = '8px 0';
    contentDiv.style.padding = '4px';
    contentDiv.style.border = '1px solid #eee';

    // 创建Input元素
    const inputField = document.createElement('input');
    inputField.type = 'text';
    inputField.className = 'dynamic-input';
    inputField.placeholder = `输入第${i+1}组内容`;
    inputField.style.marginLeft = '8px';

    // 给Input绑定input事件，实时同步内容到对应的Div
    inputField.addEventListener('input', function() {
      contentDiv.textContent = this.value;
    });

    // 把Div和Input添加到容器里
    container.appendChild(contentDiv);
    container.appendChild(inputField);
    // 加个换行，排版更清晰
    container.appendChild(document.createElement('br'));
  }
}

// 绑定生成按钮的点击事件
generateBtn.addEventListener('click', function() {
  const count = parseInt(countInput.value);
  if (!isNaN(count) && count >= 1) {
    generateComponents(count);
  } else {
    alert('请输入有效的正整数哦！');
  }
});

// 页面加载完成后默认生成1组
window.addEventListener('load', function() {
  generateComponents(1);
});

关键知识点解释 #

• 我们在创建每一对div和input时，直接在input的input事件监听器里引用了对应的contentDiv——因为是在循环的同一个作用域里，所以能精准关联到当前组的Div，不会搞混。
• 每次点击生成按钮时先清空容器，避免旧的组件残留。
• 使用input事件而不是change事件，能实现实时同步（用户每输入一个字符就更新Div，而不是失去焦点才更新）。

你可以直接把这段代码复制到HTML文件里运行测试，完全能满足你的需求～

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