How to click on a paragraph and add another paragraph using jQuery ?
In this article, we will learn how to add another paragraph to the document when a paragraph is clicked using jQuery.
Approach: We will be using the delegate() and after() methods of jQuery. The delegate() method is used to add event listeners to the given element. This will be used to add a click event listener to the paragraph element. This method takes three parameters, in our case, the child-selector is the paragraph element, the event is “click” and the function is an anonymous function.
The anonymous callback function is used to add a new paragraph to the document. This is done using the after() method that inserts the given element after the selected element in the document. We will insert a new paragraph element after the current one by using the this binding as the selector. This will hence add a paragraph element to the document after the one that was clicked. We can also add a counter variable to see this in effect.
Syntax:
$(selector).delegate("target_elem", function() { $(this).after("content"); })
The below example demonstrates this approach.
Example:
HTML
< html > < head > < style > p { background: green; color: white; padding: 5px; } </ style > <!--Include the jQuery library--> < script src = </ script > </ head > < body style = "text-align: center;" > < h1 style = "color: green;" > GeeksforGeeks </ h1 > < p > Click on the paragraphs to start adding new paragraphs </ p > < script > // A count variable to keep track // of the current paragraph let cnt = 0; // Add the click event listener to // the required paragraph element $("body").delegate("p", "click", function() { // Insert a new paragraph after // this paragraph $(this).after( "< p >New paragraph " + cnt + "</ p > "); cnt++; }); </ script > </ body > </ html > |
Output:
Please Login to comment...