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:

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.