Clone HTML using jQuery

In this tutorial we are going to see how to copy and insert HTML element dynamically. In previous tutorial we have added HTML form elements dynamically by using jQuery load() function.

In this example, we are using jQuery clone() to copy html element. And then by using jquery insert function we are adding element to the target div.

View Demo


HTML Textbox to Clone

This code contains textbox input to specify product name and price. This input element is cloned for adding multiple product entries.

<DIV id="product-header">
<DIV class="float-left"> </DIV>
<DIV class="float-left col-heading">Item Name</DIV>
<DIV class="float-left col-heading">Item Price</DIV>
<DIV id="product">
	<DIV class="product-item float-clear" style="clear:both;">
	<DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>
	<DIV class="float-left"><input type="text" name="item_name[]" /></DIV>
	<DIV class="float-left"><input type="text" name="item_price[]" /></DIV>
<DIV class="btn-action float-clear">
<input type="button" name="add_item" value="Add More" onClick="addMore();" />
<input type="button" name="del_item" value="Delete" onClick="deleteRow();" />

jQuery Clone Function

In this script we are using jQuery clone and insert functions to add dynamic textboxes in the product form.

function addMore() {
function deleteRow() {
	$('DIV.product-item').each(function(index, item){
		jQuery(':checkbox', this).each(function () {
            if ($(this).is(':checked')) {

View DemoDownload

This jQuery code tutorial was published on March 24, 2015.

↑ Back to Top