如何使用JavaScript实现点击按钮添加重复元素

数据老陈

2026-10-7

问题原因分析

原代码的变量赋值逻辑错误，const NewDiv = document.createElement('div').className = "repeatedBlock" 会导致NewDiv最终被赋值为字符串repeatedBlock，而非DOM元素实例
初始创建的输入框、按钮、div都是单个实例，重复append只会移动元素位置，不会生成新的元素
form内的按钮默认type为submit，点击会触发表单提交刷新页面，无法实现追加效果
部分语法存在笔误，比如创建form时的单引号未闭合

修复后的完整代码

// 初始创建表单
const Form =  document.createElement('form');
document.body.append(Form); // 可根据实际需求修改表单的挂载节点

// 封装生成重复块的函数，每次调用都会生成全新的元素实例
function createRepeatedBlock() {
  const Input = document.createElement('input');   
  const Button = document.createElement('button');
  Button.textContent = '新增块';
  Button.type = 'button'; // 屏蔽按钮默认的表单提交行为
  const NewDiv = document.createElement('div');
  NewDiv.className = "repeatedBlock";

  NewDiv.append(Input);
  NewDiv.append(Button);
  
  // 给新生成的按钮也绑定点击事件，实现点击任意按钮都可新增块
  Button.onclick = changeContent;
  return NewDiv;
}

// 初始渲染第一个块
Form.append(createRepeatedBlock());

// 点击事件逻辑
function changeContent() {
  // 每次点击新增2个块，修改addCount的值即可调整每次添加的div数量
  const addCount = 2;
  for(let i = 0; i < addCount; i++) {
    Form.append(createRepeatedBlock());
  }
}