How to create a div using jQuery with style tag ? - GeeksforGeeks

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>
Output:
Prepend text
jQuery-Methods
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
Difference Between JavaScript and jQuery
How to get the value in an input text box using jQuery ?
QR Code Generator using HTML, CSS and jQuery
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?