Skip to content
Related Articles
Open in App
Not now

Related Articles

How to click on a paragraph and add another paragraph using jQuery ?

Improve Article
Save Article
  • Last Updated : 31 Mar, 2021
Improve Article
Save Article

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.


$(selector).delegate("target_elem", function() {

The below example demonstrates this approach.



    p {
      background: green;
      color: white;
      padding: 5px;
  <!--Include the jQuery library-->
  <script src=
<body style="text-align: center;">
  <h1 style="color: green;">
    Click on the paragraphs to start
    adding new paragraphs
    // 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
        "<p>New paragraph " +
        cnt + "</p>


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!