Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create an HTML element using jQuery ?

  • Last Updated : 21 Sep, 2021

In this article, we will see how to create an HTML element using jQuery. To create and append HTML element, we use jQuery append() method. 

The jQuery append() method is used to insert some content at the end of the selected elements.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

$(selector).append( content, function(index, html) )

Parameters:



  • content: It is required parameter and used to specify the content which is to be inserted at the end of selected elements. The possible value of contents are HTML elements, jQuery objects and DOM elements.
  • function(index, html): It is optional parameter and used to specify the function that will return the content to be inserted.
    • index: It is used to return the index position of the element.
    • html: It is used to return the current HTML of the selected element.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to create an HTML element using jQuery?
    </title>
  
    <script src="
    </script>
  
    <!-- Script to add div element in the HTML document -->
    <script>
        $(document).ready(function() {
  
            $("button").click(function() {
                $(".append").append(
'<div class="added">New HTML element added</div>');
            });
        });
    </script>
  
    <!-- Style to use on div element -->
    <style>
        .added {
            padding: 20px;
            margin-top: 20px;
            background: green;
            color: white;
            display: inline-block;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
  
        <h3>
            How to create an HTML element using jQuery?
        </h3>
  
        <button id="append">Append New HTML Element</button>
  
        <div class="append"></div>
    </center>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :