本文介绍如何在用户点击按钮时，使用原生 javascript 动态生成并插入一段预定义的 html 结构（如商品项），并精准追加到页面中指定容器内，避免 innerhtml 拼接风险，提升代码安全性与可维护性。

本文介绍如何在用户点击按钮时，使用原生 javascript 动态生成并插入一段预定义的 html 结构（如商品项），并精准追加到页面中指定容器内，避免 innerhtml 拼接风险，提升代码安全性与可维护性。

要实现“点击按钮即动态添加一个商品卡片”的功能，不推荐直接用 innerHTML += ... 拼接字符串（易引发 XSS 风险且难以维护），而应采用 DOM 操作 + document.createElement 的安全方式。以下是完整、可直接运行的实现方案：

✅ 步骤一：为插入目标设置唯一标识

确保 HTML 中存在一个明确的容器（例如

），所有新增商品都将追加至此处：

<!-- 插入目标容器（放在按钮下方或任意合适位置） -->
<div id="product-list">
  <!-- 新增的 <a> 卡片将被 append 到这里 -->
</div>

✅ 步骤二：编写健壮的 addItem() 函数

该函数创建元素、设置属性、注入内容，并追加至目标容器。注意：我们使用模板字符串构建内部结构，但仅用于 innerHTML 赋值（因内容完全可控）；若需支持用户输入内容，应改用 textContent 分别设置文本节点。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

let itemCount = 1; // 用于生成唯一标题，如 "Item 1", "Item 2"...

function addItem() {
  // 1. 创建 <a> 元素
  const itemLink = document.createElement('a');
  itemLink.href = '#';
  itemLink.className = 'list-group-item list-group-item-action flex-column align-items-start';

  // 2. 设置内部 HTML（使用模板字符串提高可读性）
  itemLink.innerHTML = `
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Item ${itemCount}</h5>
    </div>
    <p class="mb-1">Edible/Drinkable</p>
  `;

  // 3. 获取目标容器并追加新元素
  const container = document.getElementById('product-list');
  if (container) {
    container.appendChild(itemLink);
    itemCount++; // 自增序号
  } else {
    console.error('❌ Error: #product-list container not found.');
  }
}</a>

⚠️ 注意事项

• ID 唯一性：确保 id="product-list" 在整个页面中只出现一次；否则 getElementById 行为不可预测。
• 样式依赖：示例中使用了 Bootstrap 5 + Font Awesome 类名（如 fas fa-chart-area, me-3, flex-column），请确认项目已正确引入对应 CSS/JS 库。
• 语义化优化： 作为非导航容器略欠语义，如无需跳转，建议改用
  并绑定 click 事件，提升无障碍访问支持。
• 性能提示：若需批量添加（如一次加 10 项），建议使用 DocumentFragment 减少重排重绘。

✅ 最终效果验证

点击按钮后，页面中将动态出现如下结构（自动编号）：

<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
  <div class="d-flex w-100 justify-content-between">
    <h5 class="mb-1">Item 1</h5>
  </div>
  <p class="mb-1">Edible/Drinkable</p>
</a>

此方案兼顾安全性、可读性与扩展性，是现代前端开发中动态 DOM 操作的标准实践。