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:
Article Tags :
Recommended Articles