将 HTML 表单的克隆附加到文档正文中的 ID

Question

我有一个 html 表格，在签名后我想创建多个副本以一个接一个地直接显示。我可怜的克隆功能是这样的：

function formCloner(numCopies) {
  let cloneContainer = document.createElement("div");
  cloneContainer.id = "formCopies";
  for(i = 0; i < numCopies) {
    // grab the whole html form
    let html = document.getElementsByTagName("html")[0]; 
    let htmlClone = html.cloneNode(true);
    /*
     * do some other stuff to the clone
     */
    cloneContainer.appendChild(htmlClone);
  }
  document.body.appendChild(cloneContainer);
}

这种方法的一个大问题是最终所有复制过来的表单元素共享相同的 ID。这不好。我考虑过运行通过每个子节点并手动更改 ID，但这似乎有点矫枉过正。必须有一个更简单的答案，谁能推荐一种轻松的方法来实现将表单副本附加到文档正文的最终结果？

Answer 1

这很简单...简单地定位所有具有 ID 的元素，然后向它们添加 _#。对 for 属性也做同样的事情，因为它们是您首先想要使用 ID 的唯一真正原因。

htmlClone.querySelectorAll("[id]").forEach(elem=>elem.setAttribute('id',elem.getAttribute('id')+"_"+i));
htmlClone.querySelectorAll("[for]").forEach(elem=>elem.setAttribute('for',elem.getAttribute('for')+"_"+i));

将 HTML 表单的克隆附加到文档正文中的 ID

Appending Clones of HTML Form to Document body Respecting IDs

html

javascript

clone