jQueryのcloneを使って初めのリスト（li）タグを複製（クローン）し、最後のリストに追加して表示

リストタグ（li）の先頭をjQueryのclone（複製）を使用して、末尾に追加表示してみます。

1．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>

2．読み込むJsファイルとJavaScritpの記述例

<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>

3．HTMLの記述例

<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>

jQueryのcloneを使って初めのリスト（li）タグを複製（クローン）し、最後のリストに追加表示するデモ

タグ要素をコピー（複製）出来るところが良いですね。
remove的なことが出来ると動的に別の箇所にコピー（複製）したタグ要素を表示できそうです。

※流用される場合は自己責任でお願いします。