为何无法将指定div克隆并追加到目标div中？

问题根源 #

你的代码里有三个关键错误导致克隆功能失效：

1. 容器选择器错误：你用$("#AutomaticInvoiceItemList" + autoInvoiceIndex)拼接了索引值0，实际页面中容器的id是AutomaticInvoiceItemList，没有后缀0，导致找不到目标容器，自然无法追加内容。
2. 克隆元素保留隐藏属性：原模板newAutomaticItemDiv带有hidden类和hidden属性，克隆后这些属性会被保留，就算成功追加也看不到内容。
3. 重复id问题：原模板里的<article>有固定idinvoiceLineItem，克隆后会生成多个相同id的元素，违反HTML规范，可能引发后续DOM操作问题。

修复后的代码 #

jQuery代码：

function addAutomaticInvoiceLineItem() {
  // 直接选择正确的目标容器
  var autogeneratedInvoicesContainer = $("#AutomaticInvoiceItemList");
  var newAutomaticItemDiv = $("#newAutomaticItemDiv");

  // 克隆模板并移除隐藏属性和类
  var cloneAutomaticDiv = newAutomaticItemDiv.clone()
    .removeClass("hidden")
    .removeAttr("hidden");
  
  // 移除克隆后article的重复id（或改为动态生成唯一id）
  cloneAutomaticDiv.find("#invoiceLineItem").removeAttr("id");

  // 将克隆后的完整内容追加到容器中
  autogeneratedInvoicesContainer.append(cloneAutomaticDiv.html());
}

关键修改点：

• 去掉容器选择器里的索引拼接，直接用$("#AutomaticInvoiceItemList")定位目标容器。
• 克隆后移除hidden类和属性，让元素显示出来。
• 移除克隆元素中重复的id，避免HTML规范冲突。
• 使用cloneAutomaticDiv.html()直接获取模板内的内容追加，或者也可以用append(cloneAutomaticDiv.contents())，效果一致。

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