How to create a div element in jQuery ? - GeeksforGeeks

17 Jul, 2019
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:
Shivam_k
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to Show and Hide div elements using radio buttons?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills