さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】要素をコピーして追加する

Pocket
LINEで送る

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

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

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容