jQueryのcloneでリスト（li）タグ1番目の要素を複製し、末尾に追加する方法｜DAD UNION

jQueryのclone（複製）を使ってリスト（li）タグの1番目の要素を複製し、末尾に追加表示する方法をご紹介します。

Contents

cloneを使ってリスト（li）タグの1番目の要素を複製し、末尾に追加表示するCSS記述
clone()を使ってタグ要素を複製するJavaScritp記述
cloneを使ってリスト（li）タグの1番目の要素を複製し、末尾に追加表示するHTML記述
jQueryのcloneを使って初めのリスト（li）タグを複製（クローン）し、最後のリストに追加表示するデモページ

cloneを使ってリスト（li）タグの1番目の要素を複製し、末尾に追加表示するCSS記述

※リストタグ（#iList li）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
#idWrap{
	width:800px;
	margin:0 auto;
}
#iList{
	width:160px;
	text-align:left;
	margin:0 auto;
}
#iList ul{
	margin:0;
	padding:0;
}
#iList li {
	list-style-position:inside;
	list-style-type:none;
	border-bottom:dotted 1px #000000;
	padding:10px;
}
#iList li a{
	text-decoration:none;
	color:#000000;
}
#iList li a:hover{
	text-decoration:none;
	color:#999999;
}
-->
</style>

clone()を使ってタグ要素を複製するJavaScritp記述

※.clone（）でリスト（li）タグの1番目（li:first）の要素を複製し.append()でulタグ要素末尾に追加します、

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var liclone = $('#iList ul li:first').clone(false);
	$('#iList ul').append(liclone);
});
</script>

cloneを使ってリスト（li）タグの1番目の要素を複製し、末尾に追加表示するHTML記述

※複製するリスト（li）タグを用意しました。必要に応じて変更して下さい。

<div id="idWrap">

<h1>HTMLタグで記述している初めのリスト（li）タグ「DAD UNION」を複製（clone）して末尾に追加します。</h1>



<div id="iList">

<ul>

 	<li>
					<a href="https://dad-union.com/">DAD UNION</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/69">jQueryを使って複数画像をフェードインフェードアウトで切替表示</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/63">iscroll.js：スマホサイトで上下固定バーを実装してみる</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/75">マウスオーバー・アウトで画像サイズを伸縮表示して見る</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/60">jquery.jscrollpane.min.js：スクロールバーをカスタムするjs</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/57">getJSONでjson形式の配列情報を取得表示する方法</a>
</li>

</ul>

</div>
<!--/iList-->
</div>