How to create an HTML element using jQuery ?

Last Updated : 09 May, 2023

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

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

Syntax:

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

Parameters:

content: It is a required parameter and is used to specify the content which is to be inserted at the end of selected elements. The possible value of contents is HTML elements, jQuery objects, and DOM elements.
function(index, html): It is an optional parameter and is 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: In this example, we will use the append() method of JQuery.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        How to create an HTML element using jQuery?
    </title>
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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>