基于JS数组对象数据，点击按钮动态创建HTML Div内容

没问题，我帮你搞定这个动态生成内容的需求！下面是具体的实现步骤和代码示例，你可以直接参考调整：

首先，我先假设你的数组对象数据结构（你可以完全替换成自己的实际数据），然后一步步完成功能开发：

1. 调整HTML结构 #

先给页面加一个触发按钮，同时保留你原有的grid容器结构：

<div class="grid-container">
  <h4 class="secondary bot-space-md">Certificate</h4>
  <a href="#" class="primary closeIcon icon-Delete"></a>
  <!-- 原有示例内容，不需要的话可以直接删除 -->
  <div class="row">
    <div class="col-6">
      <label>Country</label>
      <p>test</p>
    </div>
    <div class="col-6">
      <label>Certificate No.</label>
      <p>test-123</p>
    </div>
  </div>
</div>
<!-- 添加生成按钮 -->
<button id="generateCertificates" class="btn btn-primary">生成证书内容</button>

2. 编写JavaScript逻辑 #

接下来写JS代码，实现点击按钮后遍历你的数组数据，动态生成对应的Div结构：

// 获取页面元素
const gridContainer = document.querySelector('.grid-container');
const generateBtn = document.getElementById('generateCertificates');

// 模拟你的数组对象数据（替换成你实际的数据源）
const certificateData = [
  { country: "Germany", certNumber: "DE-789", status: "Valid" },
  { country: "France", certNumber: "FR-456", status: "Valid" },
  { country: "Japan", certNumber: "JP-123", status: "Expired" }
];

// 绑定按钮点击事件
generateBtn.addEventListener('click', () => {
  // 可选：清空现有动态生成的证书内容（如果需要覆盖而不是追加）
  // 这里只删除除了第一个row之外的所有row，保留原有示例；如果要清空所有，改成 gridContainer.querySelectorAll('.row').forEach(row => row.remove())
  const existingDynamicRows = gridContainer.querySelectorAll('.row:not(:first-child)');
  existingDynamicRows.forEach(row => row.remove());

  // 遍历数据生成每个证书条目
  certificateData.forEach(cert => {
    // 创建row容器
    const newRow = document.createElement('div');
    newRow.classList.add('row');

    // 创建Country列
    const countryCol = document.createElement('div');
    countryCol.classList.add('col-6');
    // 这里用innerHTML快速生成结构，如果数据是用户输入，建议用textContent避免XSS
    countryCol.innerHTML = `
      <label>Country</label>
      <p>${cert.country}</p>
    `;

    // 创建证书编号列（可根据你的数据字段调整）
    const certNumCol = document.createElement('div');
    certNumCol.classList.add('col-6');
    certNumCol.innerHTML = `
      <label>Certificate Number</label>
      <p>${cert.certNumber}</p>
    `;

    // 把列添加到row中
    newRow.appendChild(countryCol);
    newRow.appendChild(certNumCol);

    // 把新row添加到grid容器里
    gridContainer.appendChild(newRow);
  });
});

3. 安全提示（重要） #

如果你的数组数据包含用户输入的内容，不要用innerHTML，避免XSS攻击，改用textContent创建元素：

// 安全创建元素的示例
const countryCol = document.createElement('div');
countryCol.classList.add('col-6');

const countryLabel = document.createElement('label');
countryLabel.textContent = 'Country';
const countryText = document.createElement('p');
countryText.textContent = cert.country;

countryCol.appendChild(countryLabel);
countryCol.appendChild(countryText);

4. 自定义调整 #

• 如果不需要清空原有内容，直接追加新条目，删掉删除existingDynamicRows的代码即可
• 可以根据你的数据字段，添加更多col-6列（比如状态、过期日期等）
• 样式可以根据你的现有CSS类调整，保持和原页面风格一致

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