JavaScript

How to Duplicate and Append the First List (li) Element Using jQuery’s clone

 

In this article, we will introduce how to duplicate the first element of a list (li) tag using jQuery’s clone and append it to the end of the list.

CSS for Duplicating and Appending the First List (li) Element Using clone

Below is the CSS for the list tag (#iList li). Please modify it as necessary.

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

JavaScript for Duplicating and Appending Tag Elements Using clone()

Using .clone(), we duplicate the first (li:first) element of the list (li) tag and append it to the end of the ul tag element using .append().

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

HTML for Duplicating and Appending the First List (li) Element Using clone

We have prepared the list (li) tag to be duplicated. Please modify it as necessary.

<div id="idWrap">

<h1>We will duplicate (clone) the first list (li) tag "DAD UNION" written in HTML tags and append it to the end.</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">Switching multiple images with fade in and fade out using jQuery</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/63">Implementing fixed bars at the top and bottom on a smartphone site using iscroll.js</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/75">Change the image size on mouse over and out</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/60">Customize the scrollbar with jquery.jscrollpane.min.js</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/57">How to retrieve and display array information in JSON format with getJSON</a>
</li>

</ul>

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

Demo Page for Duplicating and Appending the First List (li) Element Using jQuery’s clone

Demo of duplicating (cloning) the first list (li) tag and appending it to the last list using jQuery’s clone

The ability to copy (duplicate) tag elements is quite useful. By using remove() on the original tag element and displaying the copied (duplicated) tag element elsewhere, you can create dynamic effects.

　
Please use at your own risk if you adapt this code.
Do not use the Google Analytics tag from the demo page tags.

clone li list tag
RELATED POST