Skip to content
Related Articles

Related Articles

Improve Article
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>
  
    <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>
  
    <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>

Output:

Prepend text




My Personal Notes arrow_drop_up
Recommended Articles
Page :