How to create a div element in jQuery ?

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="  
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.

<!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.

<!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 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:

My Personal Notes

Recommended Posts: