如何在项目中动态生成带文本框与浏览按钮的多模块？

核心思路 #

通过JavaScript动态创建DOM元素，配合CSS统一样式，实现可按需配置数量的模块（每个模块包含文本框+文件选择按钮）。

实现代码 #

1. HTML基础结构

<div class="modules-container"></div>
<button id="add-module-btn">添加新模块</button>

2. CSS样式（匹配参考图的布局风格）

.module {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.module input[type="text"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.module input[type="file"] {
  padding: 4px;
  cursor: pointer;
}

#add-module-btn {
  padding: 8px 16px;
  cursor: pointer;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

3. JavaScript逻辑（支持初始化数量+动态添加）

const container = document.querySelector('.modules-container');
const addBtn = document.getElementById('add-module-btn');

// 生成单个模块的函数
function createModule() {
  const moduleDiv = document.createElement('div');
  moduleDiv.className = 'module';

  // 创建文本框
  const textInput = document.createElement('input');
  textInput.type = 'text';
  textInput.placeholder = '输入文本...';

  // 创建文件选择按钮
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.className = 'file-btn';

  // 把元素添加到模块容器
  moduleDiv.appendChild(textInput);
  moduleDiv.appendChild(fileInput);
  container.appendChild(moduleDiv);
}

// 初始化生成指定数量的模块（比如5个）
const initialCount = 5;
for (let i = 0; i < initialCount; i++) {
  createModule();
}

// 点击按钮添加新模块
addBtn.addEventListener('click', createModule);

扩展说明 #

• 修改initialCount的值，即可直接设置初始加载的模块数量（比如改成6）
• 如需删除模块功能，可在createModule函数中给每个模块添加删除按钮，并绑定删除DOM元素的逻辑
• 文本框可根据需求设置默认值、禁用状态；文件选择器可通过accept属性限制可选文件类型（例如accept=".txt,.pdf"）

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