如何使用JavaScript在Bootstrap模态框指定位置创建HTML元素

API 探路者

2026-9-25

当前代码使用document.body.appendChild将生成元素直接插入到页面body末尾，所以不符合插入位置要求，调整create函数插入逻辑即可，修改后的代码如下：

let a = 1;

// 创建带唯一id的文本输入框和日期选择器
function create() {
  // 定位到目标容器：modal-body下的container-fluid
  const modalContainer = document.querySelector('.modal-body .container-fluid');

  // 新建符合Bootstrap栅格规则的行元素
  const newRow = document.createElement('div');
  newRow.className = 'row';

  // 组装日期选择器模块
  const dateCol = document.createElement('div');
  dateCol.className = 'col-md-3 offset-md-1'; // offset-md-1用于对齐原有行的label占位宽度
  const pickdate = document.createElement("input");
  pickdate.type = 'date';
  pickdate.className = 'form-control input-lg';
  pickdate.id = "pickdate" + a;
  dateCol.appendChild(pickdate);

  // 组装文本输入框模块
  const textCol = document.createElement('div');
  textCol.className = 'col-md-7';
  const input = document.createElement("input");
  input.type = 'text';
  input.className = 'form-control input-lg';
  input.id = "txt" + a;
  textCol.appendChild(input);

  // 把组装好的列插入行，再把行插入目标容器末尾
  newRow.appendChild(dateCol);
  newRow.appendChild(textCol);
  modalContainer.appendChild(newRow);

  a++;
}