How to create a div using jQuery with style tag ?

Last Updated : 28 Apr, 2021

Creating an <div> element with a style tag using jQuery can be done in the following steps.

Steps:

Create a new <div> element.
Create an object with all the styles that we want to apply.
Choose a parent element, where to put this newly created element.
Put the created div element into the parent element.

Example 1: This example will create an <div> element and use the append() method to append the element at the end of the parent element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src="https://code.jquery.com/jquery-git.js"> 
    </script> 
  
    <style> 
        .divClass { 
            height: 40px; 
            width: 200px; 
            border: 1px solid blue; 
            color: white 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <div id="parent"> 
        This is parent div 
    </div> 
    <div style="height:10px;"></div> 
    <!-- JavaScript function addText() is called to add to parent div-->
    <input type="button" value="Add <div> Text" onclick="addText()" /> 
    <script> 
        <!-- Function to add text in a div element with above styles-->
        function addText() { 
            $(document).ready(function() { 
  
                var object = { 
                    id: "divID", 
                    class: "divClass", 
                    css: { 
                        "color": "Red" 
                    } 
                }; 
                var addition = $("<div>", object); 
                addition.html("Added text GFG"); 
                $("#parent").append(addition); 
            }); 
        } 
    </script> 
</body> 
  
</html> 

Output:

append

Example 2: This example will create an <div> element and uses the prependTo() method to append the element at the start of the parent element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src="https://code.jquery.com/jquery-git.js"> 
    </script> 
  
    <style> 
        .divClass { 
            height: 40px; 
            width: 200px; 
            border: 1px solid blue; 
            color: white 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <div style="height:10px;"></div> 
    <div id='parent'> 
        This is parent div 
    </div> 
    <div style="height:10px;"></div> 
    <input type="button" 
           value="Prepend text div  " 
           onclick="prependDiv()" /> 
    <script> 
        function prependDiv() { 
            $(document).ready(function() { 
                var object = { 
                    id: "divID", 
                    class: "divClass", 
                    css: { 
                        "color": "Red" 
                    } 
                }; 
        <!--Prepend object is created before the parent div-->
                var prependObject = $("<div>", object); 
                prependObject.html("Prepend text is GFG"); 
                $(prependObject).prependTo($('#parent')); 
            }); 
        } 
    </script> 
</body> 
  
</html> 