Как я могу клонировать тег, у которого есть много других тегов с атрибутами?

Question

У меня есть форма с именем 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> 

Answer 1

Вы должны использовать Node.cloneNode() клонировать узел, а затем добавить его в документ с помощью Node.appendChild().

Предупреждение: cloneNode() может привести к дублированию идентификаторов элементов в документе.

Если элемент использует идентификатор, вы всегда должны изменить его уникальный идентификатор, так что вы должны сделать с атрибутом name для того, чтобы иметь его в должности форм службы/получить данные при отправке.

Клонирование узла копирует все его атрибуты и их значения, , включая встроенные (встроенные) прослушиватели. Он не копирует событие слушателей, добавленных с помощью addEventListener() или объектов, присвоенных элементу . (например, node.onclick = fn) Кроме того, для элемента раскрашенное изображение не копируется.

Для примера, вы можете сделать что-то вроде этого, чтобы иметь <div id="original-1" class="original"> клонировали и встраивали в виде документа с уникальным идентификатором и входными именами, как это:

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>