How to click on a paragraph and add another paragraph using jQuery ? Last Updated : 31 Mar, 2021 Comments Improve Suggest changes Like Article Like Report 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= "https://code.jquery.com/jquery-git.js"> </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: Comment More infoAdvertise with us Next Article How to click on a paragraph and add another paragraph using jQuery ? code_blooded7 Follow Improve Article Tags : Web Technologies JQuery HTML-Tags CSS-Properties jQuery-Questions +1 More Similar Reads How to find all textarea and paragraphs to make a border using jQuery ? Given a set of textareas, the task is to apply a border on each of them and subsequently add some paragraphs and then define a border on every paragraph using the jQuery library. Approach 1: Using the click(), css() and add() methods in jQuery: There are two textareas, two paragraphs, and one button 3 min read How to click a button to animate the paragraph element using jQuery ? In this article, we will click a button to animate the paragraph element using jQuery. To animate the paragraph elements, we use animate() method. The animate() method is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the ani 1 min read How to add a class to the last paragraph element using jQuery ? In this article, we will learn to add a class to the last paragraph element using jQuery. To add a class to the last paragraph element, we use last() and addClass() methods. The jQuery last() function is an inbuilt function that is used to find the last element of the specified elements. Syntax: $(s 1 min read How to change background color of paragraph on double click using jQuery ? In this article, we will see how to change the background color of a paragraph using jQuery. To change the background color, we use on() method. The on() method is used to listen the event on an element. Here we are going to use dblclick event. For changing the background color we are going to use c 2 min read How to display a message on dblclick event on all paragraphs of a page using jQuery ? The purpose of this article is to display a message to the double click event on all paragraphs on a page. Whenever you double-click on any of the paragraphs then the message will appear. Used method in jQuery: dblclick(): This method is used to trigger the dblclick event, or attaches a function to 1 min read How to find all paragraph elements using jQuery ? Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the el 2 min read How to append a jQuery object to all paragraphs using jQuery ? In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() M 2 min read How to insert an object before all paragraphs using jQuery ? jQuery is a Javascript library to ease the task of web developers. Developers can use the Jquery library rather than using Javascript in their code. Jquery provides a lot of good features like DOM manipulation, event handling, AJAX support, etc. It is highly recommended to learn the basics of HTML, 2 min read How to remove all paragraphs from the DOM using jQuery ? To remove elements and content, we use jQuery remove() method which removes the selected element as well as everything inside it, also it will remove all bound events associated with that target element. Syntax: $(selector).remove() Example : HTML <!DOCTYPE html> <html> <head> < 1 min read How to insert a jQuery object after all paragraphs using jQuery ? The task is to insert a jQuery object after all the paragraphs using jQuery. Approach: Create DOM element or jQuery object using <span> tag.Create a paragraph using <p> tag.Create a button using button tag after clicking on which the object will be inserted after paragraph.Write a script 1 min read Like