Skip to content
Related Articles

Related Articles

How to create a div element in jQuery ?
  • Last Updated : 17 Jul, 2019
GeeksforGeeks - Summer Carnival Banner

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.




<!DOCTYPE html>
<html>
      
<head>
    <title>Create div element</title>
      
    <script src=" 
    </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.




<!DOCTYPE html>
<html>
      
<head>
    <title>Create div element</title>
      
    <script src=" 
    </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.




<!DOCTYPE html>
<html>
      
<head>
    <title>Create div element</title>
      
    <script src=" 
    </script
      
    <!-- Script to create div element -->
    <script>
        $(document).ready(function() {
            jQuery("<div/>", {
                id: "div-id",
                class: "div-class",
                text: "This is text of div"
            }).appendTo(".box");
        });
    </script>
      
    <!-- Style to add 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>
      
    <div class="box"></div>
</body>
  
</html>                    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :