Клонировать набор полей и изменить идентификаторы с помощью простого JavaScript?

Question

Я знаю, как клонировать объекты, используя простой JavaScript, и увеличивать число, однако мне было интересно, каков наилучший подход к замене идентификаторов и других атрибутов, таких как «for», для элементов метки, чтобы они не дублировались при добавлении клонированных наборов полей к форме.

Может ли кто-нибудь дать мне быстрый пример того, как сделать это с помощью простого ole 'JavaScript?

Answer 1

Клонируйте узлы, как обычно, и измените их, прежде чем вставлять в документ. Неважно, если два элемента Element существуют с одинаковым идентификатором, если они оба не вставлены в дерево childNodes документа одновременно.

var copy= document.cloneNode(element);
n++;
copy.getElementsByTagName('label')[0].htmlFor= 'thing'+n;
copy.getElementsByTagName('input')[0].id= 'thing'+n;
element.parentNode.appendChild(copy);

Answer 2

Вы можете написать свой «ярлык» без «для», как это:

<p><label>Text 1 : <input type="text" name="text[]" /></label></p>
<p><label>Text 2 : <input type="text" name="text[]" /></label></p>
<p><label>Text 3 : <input type="text" name="text[]" /></label></p>