How to Click on header to add another header in jQuery ?

Last Updated : 25 Mar, 2021

In this article, we will see how to add a new header element after clicking the existing header elements in jQuery. To add the new header element, the delegate() method is used.

Syntax:

$(selector).delegate("Selected_elements", function() {
    $(this).after("content");
})

Here, we use delegate() method to add one or more event handlers to the specified element that are children of selected elements. Also, we use after() method to insert content, specified by the parameter for each selected element in the set of matched element.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to Click on header to add 
        another header in jQuery? 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $("body").delegate("h1, h3", "click", function () { 
                $(this).after("<h4>Added Another Header!</h4>"); 
            }); 
        }); 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to Click on header to add 
        another header in jQuery? 
    </h3> 
</body> 
  
</html>