How to create a div element in jQuery ?
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=" </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=" </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=" </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:
.png)
