How to create a div element in jQuery ?
Last Updated :
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="
</ script >
< 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 >
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 >
$(document).ready(function() {
$("< div >This is another added div</ div >").appendTo("body");
});
</ script >
< 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 >
$(document).ready(function() {
jQuery("< div />", {
id: "div-id",
class: "div-class",
text: "This is text of div"
}).appendTo(".box");
});
</ script >
< 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...