如何克隆具有許多其他標籤的屬性的標籤？

我有一個名爲'myForm'的表單。並且我想添加一個div標籤，id爲'original'，每次我點擊一個按鈕。任何人都可以幫我添加標籤嗎？附加標籤必須在原始標籤之後，但仍在myForm中。如何克隆具有許多其他標籤的屬性的標籤？

我應該使用clone（）函數嗎？ PLZ有人告訴我....這裏是我的代碼....

<form name="myForm"> 
<div id="original" class="original"> 
    <div class="separator-2"></div> 
    <div> 
    <div class="form-group" > 
     <input type="text" class="form-control" name="AAA" style="width:400px"/> 
    </div> 
    <div class="form-group"> 
     <input type="text" class="form-control" name="BBB" style="width:400px"> 
    </div> 
    </div><br> 
</div> 
</form> 

<button id="myButton"/> 

<script> 
var form = document.getElementById('myForm'); 
document.getElementById('myButton').addEventListener('click', function(e) { 
    form.appendChild(addAdditionalTags()); 
}); 

function addAdditionalTags() { 
    //?????????? What should I write here??? 
} 
</script>

來源

2016-11-21 Jay Bumjun Kim

試試這個， $（'myForm'）。append（$（'＃original'）。clone（））; 我很擔心，如果ID =「原始」被複制到克隆元素，這將是很好的，如果該ID不需要爲DIV避免它。 –

你必須使用Node.cloneNode()克隆的節點，然後使用Node.appendChild()其添加到文檔中。

警告：cloneNode()可能會導致文檔中元素ID重複。

如果你的元素使用一個ID，你應該總是將其更改爲一個唯一的ID，所以你必須與name屬性做才能擁有它的形式後/獲取數據時，提交。

克隆節點複製其所有屬性及其值，包括內部（內嵌）偵聽器。它不會複製使用addEventListener（）添加的事件事件或者分配給元素屬性的事件。（例如，node.onclick = fn）此外，對於一個元素，不會複製被繪製的圖像。

對於你的榜樣，你可以做這樣的事情有<div id="original-1" class="original">克隆並插入到文檔的形式與一個唯一的ID，並輸入名稱如下：

document.getElementById('cloneElement').addEventListener('click', function(e) { 
 
    var form = document.getElementById('myForm'); 
 
    var formOriginals = form.getElementsByClassName('original'); 
 
    var cloned = formOriginals[0].cloneNode(true); 
 
    var new_index = formOriginals.length + 1; 
 
    cloned.id = 'original-' + new_index; 
 
    cloned.getElementsByTagName('input')[0].name = 'field-' + new_index + 'a'; 
 
    cloned.getElementsByTagName('input')[1].name = 'field-' + new_index + 'b'; 
 
    form.appendChild(cloned); 
 
});

<form name="myForm" id="myForm"> 
 
    <div id="original-1" class="original"> 
 
    <div class="separator"></div> 
 
    <div class="groups"> 
 
     <div class="form-group" > 
 
     <input type="text" class="form-control" name="field-1a" style="width:400px"/> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" name="field-1b" style="width:400px"> 
 
     </div> 
 
    </div><br> 
 
    </div> 
 
</form> 
 

 
<button id="cloneElement">Clone Form Element</button>

這將導致像這樣的html dom樹，並且每當我們點擊克隆按鈕時它將克隆<div id="original-1" class="original">元素：

<form name="myForm" id="myForm"> 
    <div id="original-1" class="original"> 
     <div class="separator"></div> 
     <div class="groups"> 
      <div class="form-group"> 
       <input type="text" class="form-control" name="field-1a" style="width:400px"> 
      </div> 
      <div class="form-group"> 
       <input type="text" class="form-control" name="field-1b" style="width:400px"> 
      </div> 
     </div><br> 
    </div> 
    <div id="original-2" class="original"> 
     <div class="separator"></div> 
     <div class="groups"> 
      <div class="form-group"> 
       <input type="text" class="form-control" name="field-2a" style="width:400px"> 
      </div> 
      <div class="form-group"> 
       <input type="text" class="form-control" name="field-2b" style="width:400px"> 
      </div> 
     </div><br> 
    </div> 
</form>

來源

2016-11-21 21:05:00

如何克隆具有許多其他標籤的屬性的標籤？

回答

相關問題