如何点击按钮通过addItem函数在HTML指定位置添加指定代码？

步骤说明 #

1. 指定插入目标容器：在HTML中添加一个带唯一ID的容器，用于接收新插入的元素，确保能准确定位插入位置：

   <div id="product-list" class="list-group"></div>
   

2. 编写addItem()函数：通过JavaScript获取目标容器，将指定的HTML片段插入其中。注意修正原代码中的标签语法错误（原代码里的</small>应为</p>，与前面的<p>标签匹配，保证HTML结构合法）。

完整代码示例 #

<!-- 目标插入容器 -->
<div id="product-list" class="list-group">
  <!-- 已有项目将显示在此，新项目会插入到容器末尾 -->
</div>

<!-- 触发按钮 -->
<button onclick="addItem()" class="list-group-item list-group-item-action py-2 ripple btn btn-primary">
  <i class="fas fa-chart-area fa-fw me-3"></i><span>➕  Add Product</span>
</button>

<script>
function addItem() {
  // 获取目标容器
  const targetContainer = document.getElementById('product-list');
  
  // 待插入的HTML代码（已修正标签错误）
  const newItemHTML = `
    <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><br>
  `;
  
  // 将新元素插入到容器末尾
  targetContainer.innerHTML += newItemHTML;
}
</script>

额外优化建议 #

• 如果需要动态生成不同的产品名称或描述，可以将Item 1和Edible/Drinkable替换为变量，比如通过输入框获取用户输入后再插入。
• 若要避免重复插入相同内容，可以在函数中添加判断逻辑。

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