Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
    </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>

                    

Output:



Last Updated : 25 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads