jQuery克隆div插入位置异常：为何总是插入首个div后而非最后克隆div后？

嗨，我来帮你搞定这个问题～

你遇到的核心问题是HTML id的唯一性规则在搞鬼：

• HTML规范明确要求页面中每个元素的id必须唯一，当你克隆#to-be-cloned时，新生成的div会继承这个重复的id，这本身就不符合规范。
• jQuery的$('#to-be-cloned:last')选择器其实不会生效——因为id选择器在jQuery里只会匹配页面中第一个拥有该id的元素，不管后面有没有重复的id，所以每次克隆的元素都会被插在第一个div后面。

修正后的代码方案 #

我们可以把id改成class来实现需求，同时保证HTML结构合规：

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-be-cloned">
  <select>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
</div>
<button id="add-div">Add div</button>

jQuery部分

document.getElementById("add-div").onclick = function() {
  // 选中最后一个待克隆的元素，克隆后插入到它后面
  $('.to-be-cloned:last').clone().removeAttr('id').insertAfter($('.to-be-cloned:last'));
}

原生JavaScript实现方案 #

如果你想用原生JS解决，也可以这样写：

document.getElementById("add-div").onclick = function() {
  // 获取所有待克隆的元素
  const allClones = document.querySelectorAll('.to-be-cloned');
  // 取最后一个元素
  const lastClone = allClones[allClones.length - 1];
  // 深度克隆该元素
  const newClone = lastClone.cloneNode(true);
  // 移除重复的id（如果原元素有id的话）
  newClone.removeAttribute('id');
  // 插入到最后一个元素的后面
  lastClone.parentNode.insertBefore(newClone, lastClone.nextSibling);
}

关键说明 #

• 使用class选择器替代id，就能通过:last（jQuery）或者querySelectorAll的索引（原生JS）精准定位到最后一个已添加的克隆元素。
• 克隆后移除重复id，既能符合HTML规范，也能避免后续其他DOM操作出现意外问题。

内容的提问来源于stack exchange，提问作者Lukáš Ježek