Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to clone a block using JQuery?
A powerful method that allows developers to dynamically create and modify content blocks on a web page is cloning a block with jQuery. In website development cloning means duplicating an element or creating a new element just like another element. By using JQuery clone techniques you can clone a div, button, label, text, or anything on your web page.
Cloning page components, including blocks of HTML code, is one of jQuery's most helpful capabilities. The technique of cloning is efficient and time-saving when building dynamic websites. This technique makes it easy to instantly make numerous copies of an existing element on a page.
Syntax
var cloneidentifier= $('#blockname').clone();
Approach - 1
In this example, we will clone a text written in a text field.
Algorithm
Step-1 Determine which textbox element holds the text that you wish to copy.
Step-2 Use the jQuery val() function to get the textbox's value.
Step-3 Set the text that was retrieved as the value of a new textbox element.
Step-4 Place the new textbox component where you want it on the page.
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<style>
body {
background-color: White;
}
#main {
text-align: center;
margin: 20px 300px;
padding: 50px;
background-color: yellow;
display: inline-block;
position: absolute;
}
button {
padding: 100px;
font-size: 20px;
margin-top: 100px;
width: 80px;
height: 50px;
}
p {
padding: 10px;
margin-left: 10px;
font-size: 28px;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
//specify the paragraph or element to clone
$("body").append($("p:first").clone(true));
});
//set operation on button click
$("p").click(function () {
//css for paragraph text
$(this).css("background-color", "white");
});
});
</script>
</head>
<body>
<div id="main">
<button id="clone"> Clone </button>
</div>
<p>ABCD</p>
</body>
</html>
Approach - 2
In this example, we will clone a label to create its exact copy.
Algorithm
Step-1 Determine which label you wish to copy.
Step-2 Use the jQuery val() function to get the label’s exact value.
Step-3 Set the label that was retrieved as the value of a new label element.
Step-4 Place the new label component where you want it on the page.
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<style>
body {
background-color: White;
}
#main {
text-align: center;
margin: 20px 300px;
padding: 10px;
background-color: black;
display: inline-block;
position: absolute;
}
button {
padding: 20px;
font-size: 20px;
margin-top: 05px;
width: 80px;
height: 50px;
}
p {
padding: 10px;
margin-left: 10px;
font-size: 28px;
}
label{
background-color: red;
font-size: 15px;
color: white;
}
</style>
<script>
$(document).ready(function () {
//set the button to clone label
$("button").click(function () {
$("body").append($("label:first").clone(true));
});
//select the label that you want to clone.
$("label").click(function () {
$(this).css("background-color", "white");
});
});
</script>
</head>
<body>
<div id="main">
<button id="clone"> Clone</button>
</div>
<p>this label will be cloned by clicking the clone button</p>
<label id="label"> Clone It</label>
</body>
</html>
Conclusion
When building dynamic web pages, cloning blocks using jQuery is a strong method that can help you save a huge amount of time and effort. You can quickly duplicate any block on your website.
Cloning a block can be beneficial in a variety of contexts, such as creating several copies of a form, dynamic menus, or content lists. The user experience can be improved further by implementing seamless changes between different clones of the block using jQuery's built-in animation methods. This method can be used to construct web apps that are interactive, interesting, and effective.
Developers also use some difficult alternatives of cloning such as using a server-side software program like PHP to generate HTML depending on user data or other datasets. This method can be very helpful for producing reports, presenting complex data structures, and constructing interactive forms.
415 Views
