How to create a div element in jQuery ?

Last Updated : 17 Jul, 2019

There are various method to create HTML element inside an HTML document using JQuery. But the simplest of all is append() and prepend() method. Method 1: Using prepend() Method: The prepend() method is used to insert a specified content at the beginning of the selected element. Example: This example uses prepend() method to create div element at the beginning of selected element.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>Create div element</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() {
        
            // Select the element inside div
            // element will be added
            $("body")
            
            .prepend('<div class="added">This is added div </div>');
        });
    </script>
    
    <!-- Style to use on div element -->
    <style>
        div {
            padding: 20px;
            margin-bottom: 10px;
            border: 1px solid green;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="initial">
        This is initial div
    </div>
</html>

Output:

Method 2: Using appendTo() Method: The appendTo() method in jQuery is used to insert HTML element at the end of the selected element. Example 1: This example uses appendTo() method to create div element at the end of selected element.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>Create div element</title>
    
    <script src=" 
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    
    <!-- Script to add div element at the end of document -->
    <script>
        $(document).ready(function() {
            $("<div>This is another added div</div>").appendTo("body");
        });
    </script>
    
    <!-- Style to use on div element -->
    <style>
        div{
            padding: 20px;
            margin-bottom: 10px;
            border: 1px solid green;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="initial">
    This is initial div
    </div>
</body>

</html>

Output:

Example 2: This example uses appendTo() method to create div element within the div element.