Tweet

Pocket

フォームなどで同じ入力エリアを追加するなど、ボタンクリックで要素をコピーする方法です。

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しかコピーされなくなります。