【JQuery】要素をコピーして追加する
フォームなどで同じ入力エリアを追加するなど、ボタンクリックで要素をコピーする方法です。
html
<button class="button" name="addButton" type="button">増えるよ</button> <ul class="contents"> <li id="list1"><input name="testName1" id="testId1" placeholder="コンテンツ1" type="text"></li> </ul>
javascript
$(function(){ var count = 2; $('.button').on('click', function () { var cloneitem = $('ul.contents li:last-child').clone(true); cloneitem.attr('id', 'list' + count).find('input').attr({ name: 'testName' + count, id: 'testId' + count, placeholder: 'コンテンツ' + count }).parent('li').appendTo('ul.contents'); count ++; }); });
ul.contents liの最後の要素をcloneでコピーして、コピーした要素のidと子要素のname、id、placeholderに番号を付けています。
※appendToでコピーした要素を入れる前にparentで親要素を指定しておかないと子要素のinputしかコピーされなくなります。
コメントを残す