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=" 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: