如何在用户点击按钮时再次创建HTML form元素

实现代码（可直接运行） #

<!-- 原有已存在的form -->
<form style="border:1px solid #eee; padding:15px; margin:10px 0;">
  初始form表单
</form>

<!-- 触发创建的按钮 -->
<button id="createFormBtn">点击新增form</button>

<!-- 新增form的放置容器，可根据需要替换为其他DOM节点 -->
<div id="formWrap"></div>

<script>
const createBtn = document.getElementById('createFormBtn')
const formWrap = document.getElementById('formWrap')

// 绑定按钮点击事件
createBtn.addEventListener('click', () => {
  // 1. 新建form元素
  const newForm = document.createElement('form')
  // 2. 自定义form的属性、样式、内部表单项，按你的需求修改
  newForm.style = 'border:1px solid #ddd; padding:15px; margin:10px 0;'
  newForm.innerHTML = `
    <p>新增的form表单</p>
    <input type="text" name="field" placeholder="输入内容">
    <button type="submit">提交</button>
  `
  // 3. 将form插入到页面指定位置
  formWrap.appendChild(newForm)
})
</script>

常见自定义调整项 #

• 若需要给每个新增form加唯一标识，创建时添加代码newForm.id = 'form-' + Date.now()即可避免id重复
• 若需要新增form提交时不跳转页面，可以在创建form后单独给它绑定submit事件，调用e.preventDefault()阻止默认提交行为后自行处理表单数据
• 若需要限制form的最大创建数量，可额外声明一个计数器变量，每次点击按钮创建前先判断当前数量是否达到上限，达到后停止创建即可

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