javascript克隆元素树并更改克隆中的所有ID

我创建了一个按钮，允许您克隆元素树。这是我的代码：

   function add_party(number) {
    var n = number.replace("party", ""); 
    var newparty = document.getElementById("party"+n);
    var div = document.createElement("div");
    var con = document.getElementById("party1").innerHTML;
    document.createElement("div");
    div.id = 'party' + ++n;
    div.innerHTML = con;
    newparty.parentNode.insertBefore(div, newparty.nextSibling);
    renumberDivs(div, n, "div","party");
   }

这是我的HTML：

   <div id="party1">
    <h1>Party 1</h1>
    <table>
     <tbody>
      <tr>
       <th>party name：</th>
       <td><input type="text" name="name1" value="some name"></td>
     </tr>
     <tr>
      <th>party time：</th>
      <td><input type="text" name="time1" value="some time"></td>
     </tr>
    </tbody>
   </table>
   <input type="button" onclick="add_party(this.parentNode.id)" value="add party">
  </div>

---

最好使用

addEventListener

将事件附加到元素。我发现它很有趣。请参阅，但有一个问题，对于新生成的表单，没有附加事件处理程序，因此您应该为新生成的表单附加新事件处理程序。如果您可以使用jQuery或其他一些功能，那么您可以使用类似自动绑定事件处理程序的功能。通常，此解决方案分为两步：

从最后一个点到插入点逐个操纵现有各方

将新参与方插入到插入点

功能添加方（divId）{
var party=document.getElementById（divId）；
var newParty=party.cloneNode（true）；
var allParties=document.querySelectorAll（'div[id^=“party”]”）；
var newId=parseInt（divId.replace（'party'，''），10）+1；
对于（var i=allParties.length-1；i>newId-2；i--）{
allParties[i].setAttribute（'id'，'party'+（i+2））；
allParties[i].querySelector（'h1'）.innerHTML='Party'+（i+2）；
var partyInputs=allParties[i]。querySelectorAll（'input[type=“text”]”）；
对于（var j=0；j

第一方
缔约方名称：
聚会时间：

我们就快到了，但仍然有两个问题：首先，新的政党应该出现在按下按钮的政党的正下方（我的原始代码就是这样做的），其次，因为我们在旧政党之间有了新的政党，所以计数中的数字不匹配。我在问题中添加了将旧数字更新为新数字的代码。但是我找不到一种方法将你的代码和我的代码结合起来。@CainNuke说，你点击添加按钮，现在你有了1和2。然后单击1的“添加”按钮，希望在1和2之间插入一个参与方，并且希望新添加的是2，原始2变为3。这是你想要的吗？@CainNuke回答更新了，看看这是不是你想要的？是的，现在很完美。非常感谢你。现在只有一个问题：这条线到底是做什么的？parseInt（divId.replace（'party'，''），10）+1

divId

是包含您单击的按钮的DIV的id，例如

“party2”

divId.replace（'party'，''）

检索数字部分，

“2”

。但这仍然是一个字符串（表示一个数字），因此我们使用

parseInt

，将其转换为十进制数。然后

+1

获取新添加方的ID号。

   <div id="party2">
    <h1>Party 2</h1>
    <table>
     <tbody>
      <tr>
       <th>party name：</th>
       <td><input type="text" name="name2" value=""></td>
     </tr>
     <tr>
      <th>party time：</th>
      <td><input type="text" name="time2" value=""></td>
     </tr>
    </tbody>
   </table>
   <input type="button" onclick="add_party(this.parentNode.id)" value="add party">
  </div>

function renumberDivs(el, n, tagn, ass) {
    while (el = el.nextSibling) {
    if (el.tagName && el.tagName.toLowerCase() == tagn){
      el.id = ass + ++n;
     }
    }
   }