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

我创建了一个按钮，允许您克隆元素树。这是我的代码：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>

然而，由于每个元素都有一个唯一的ID或名称克隆不应该有相同的ID或名称。相反，新的编号和名称应当由1加起来那么克隆树应该是这样的：

<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>

此外，输入值应该是空的克隆。我怎样才能做到这一点与JavaScript？（请不要jQuery）。

谢谢。

编辑：

此代码更新计数数字，所以他们总是出现在顺序：

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

来源

2014-12-04 Cain Nuke

一般情况下，这种解决方案有2个步骤：

操作现有各方逐一从上到插入点。
将新方插入插入点。

function add_party(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; 
 

 
    for(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"]'); 
 
     for(var j = 0; j < partyInputs.length; j++) { 
 
      var prefix = partyInputs[j].getAttribute("name").replace(/\d+/, ""); 
 
      partyInputs[j].setAttribute("name", prefix + (i+2)); 
 
     } 
 
    } 
 

 
    newParty.setAttribute('id', 'party' + newId); 
 
    newParty.querySelector('h1').innerHTML = 'Party ' + newId; 
 
    var inputs = newParty.querySelectorAll('input[type="text"]'); 
 
    for(var i = 0; i < inputs.length; i++) { 
 
     var prefix = inputs[i].getAttribute("name").replace(/\d+/, ""); 
 
     inputs[i].setAttribute("name", prefix + newId); 
 
     inputs[i].setAttribute("value", ""); 
 
     inputs[i].value = ""; 
 
    } 
 

 
    party.parentNode.insertBefore(newParty, party.nextSibling); 
 
}

<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>

来源

2014-12-04 07:53:56 Leo

我们几乎没有，但仍存在2个问题：首先，新党应该出现正下方的一个与被按下的按钮（我原来的代码不说），其次，既然我们在老派之间有了新的派对，那么统计数字就不会匹配。我将代码添加到我的问题中，将旧数字更新为新数字。不过，我不能找到一种方法来结合我的代码。 – 2014-12-05 03:31:14

@CainNuke说，你点击添加按钮，现在你有1和2.然后你点击添加按钮1，你想插入1和2之间的一方，并且你想新添加为2，并且原始2变成这是你想要的吗？ – Leo 2014-12-05 03:36:24

@CainNuke答案更新后，看看它是你想要的？ – Leo 2014-12-05 04:22:55

你使用addEventListener更好地附着事件元素。我发现它很有趣。请参阅DEMO...，但是有一个问题，对于新生成的表单，没有附加事件处理程序，因此应该为新生成的表单附加新的事件处理程序。如果你可以使用jQuery或其他一些人，你可以使用函数像Delegate其结合事件处理程序自动

来源

2014-12-04 07:20:10 Jesse

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

回答

相关问题