如何在jQuery中创建多个相同元素？

嘿，你提到的这两种思路都非常实用，我给你具体拆解下怎么实现：

方案一：复制最后一个列表项并清空内容 #

这种方法适合已经有现有列表项的场景，直接拿最后一项当模板复制，再清空内容就行，步骤很简单：

1. 点击按钮时，先获取目标<ul>元素
2. 获取它的最后一个<li>子元素
3. 用cloneNode(true)深复制这个li（true表示复制所有子元素和属性）
4. 清空复制出来的li里的原有内容（比如输入框值、文本内容等）
5. 把复制好的li添加到ul里

代码示例 #

<ul id="itemList">
  <li>
    <input type="text" placeholder="输入内容">
    <span>描述：</span><input type="text">
  </li>
  <li>
    <input type="text" placeholder="输入内容" value="已有内容">
    <span>描述：</span><input type="text" value="已有描述">
  </li>
</ul>
<button id="addItemBtn">添加新项</button>

<script>
const addBtn = document.getElementById('addItemBtn');
const itemList = document.getElementById('itemList');

addBtn.addEventListener('click', () => {
  // 获取最后一个li，列表为空时直接返回避免报错
  const lastItem = itemList.lastElementChild;
  if (!lastItem) return;
  
  // 深复制整个li节点
  const newItem = lastItem.cloneNode(true);
  
  // 清空所有输入框的内容
  const inputs = newItem.querySelectorAll('input');
  inputs.forEach(input => {
    input.value = '';
    // 重置placeholder（如果需要的话）
    input.placeholder = input.getAttribute('placeholder') || '';
  });
  
  // 如果有文本节点需要清空，比如自定义文本内容，可以这样处理：
  // const textElements = newItem.querySelectorAll('.custom-text');
  // textElements.forEach(el => el.textContent = '');
  
  // 将新项添加到列表末尾
  itemList.appendChild(newItem);
});
</script>

方案二：使用预定义的模板元素 #

如果希望列表为空时也能添加新项，或者不想依赖现有列表项，预定义一个隐藏的模板是更好的选择。推荐用HTML5的<template>标签（它本身不会渲染到页面上），也可以用一个隐藏的li元素替代。

代码示例（用template标签） #

<!-- 预定义模板，默认不会显示在页面上 -->
<template id="itemTemplate">
  <li>
    <input type="text" placeholder="输入内容">
    <span>描述：</span><input type="text">
  </li>
</template>

<ul id="itemList"></ul>
<button id="addItemBtn">添加新项</button>

<script>
const addBtn = document.getElementById('addItemBtn');
const itemList = document.getElementById('itemList');
const itemTemplate = document.getElementById('itemTemplate');

addBtn.addEventListener('click', () => {
  // 克隆模板的内容（template的content是文档片段）
  const newItem = document.importNode(itemTemplate.content, true).querySelector('li');
  
  // 模板本身就是空结构，直接添加即可
  itemList.appendChild(newItem);
});
</script>

小提示 #

• 如果用隐藏的li当模板，只需要给li加style="display: none;"，克隆后记得移除这个隐藏样式
• 如果列表项里有下拉框、复选框等控件，清空逻辑要对应调整（比如把复选框设为未选中状态）

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