With the evolution of web technologies, the demands on our websites and applications are becoming more sophisticated. To improve user experience, adding dynamic content manipulation and interactive elements has become essential.
This article introduces how to use jQuery’s clone and insertAfter methods to duplicate elements on a page based on user actions. It is useful when duplicating and adding form text areas (input) or registration items. The article explains everything in detail, from the basics to advanced techniques, making it easy for engineers and programming beginners to understand.
Introduction: What is jQuery?
jQuery is one of the libraries that makes JavaScript easier to handle. It provides a wealth of features for dynamic manipulation of web pages, including DOM manipulation, event handling, and animation implementation. The clone and insertAfter methods used in this article are examples of jQuery’s convenient functionalities.
Target: Element Duplication
On websites or applications, there are cases where you want to dynamically increase the content based on user interactions, such as adding input fields for multiple contact information or additional tasks in a task list. Using jQuery’s clone method, you can duplicate existing elements and add them to the page as new elements.
Implementation Steps
Step 1: CSS Setup
First, configure the CSS applied to the elements (.fukusei) to be duplicated. In this example, a background color is set to make the duplicated elements visually distinguishable.
<style type="text/css">
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
overflow-x: hidden;
line-height: 1.8em;
text-align: center;
}
h1{
font-size:16px;
text-align:center;
font-weight:normal;
padding:10px 0;
position: relative;
}
.fukusei{
padding: 4px;
width: 380px;
margin: 0 auto 16px auto;
cursor: pointer;
background-color: #cccccc;
}
</style>
Step 2: Prepare HTML
Next, prepare the HTML for the element to be duplicated. In this example, a clickable area is indicated by applying class=”fukusei” to a div tag.
<h1>Click on the gray area below to duplicate that section.</h1>
<div class="fukusei">Click this area to duplicate this element.</div>
Step 3: Utilize jQuery
Using jQuery’s clone and insertAfter methods, duplicate the specified element and insert it right after the original element. First, load the jQuery library (jquery-2.2.0.min.js), and then write a script to perform the duplication process. The process duplicates and adds the clicked class=fukusei tag area after the original element.
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".fukusei").click(function(){
$(this).clone(true).insertAfter(this);
});
</script>
Demo Page for Duplicating Existing Tag Elements
If you’d like to experience this feature in action, please check out the demo page below. You can observe how the specified elements are duplicated on the page simply by clicking.
Demo for Duplicating Existing Tag Elements
Conclusion
In this article, we explained how to use jQuery to dynamically duplicate elements on a page. This technique can be applied in various scenarios, such as adding input fields in a form or increasing list items. By understanding and applying the code, you can develop more interactive websites and applications.
Learning programming is best achieved by hands-on practice. Try incorporating the techniques introduced here into your projects. New discoveries and creations await you.
We hope this article serves as a valuable resource for engineers and beginners interested in programming. Let’s continue to acquire and share new knowledge and skills as technology evolves.
※ Please use this content at your own risk. Do not reuse the Google Analytics tags within the head tag.
