How to Create a DIV element using jQuery
$(".mainDiv").append('<div class="NewDiv">Using append()</div>');
$(".mainDiv").prepend('<div class="NewDiv">Using prepend()</div>');
There are many ways to dynamically add a ‹div› element using jQuery. But the simplest of all is append() (to add at last position of parent) and prepend() (to add at first position of parent) methods.
jQuery prepend()
jQuery prepend() method is an inbuilt method which is used to insert a specified content at the starting of the selected element.
$(selector).prepend(content, function)
jQuery append()
jQuery append() method is an inbuilt method in jQuery that is used to insert HTML element at the end of the selected element.
$(selector).append(content,function)
Create a DIV element | jQuery

<div class="mainDiv">
</div>
$("button").click(function(){
$(".mainDiv").append('<div class="NewDiv">Using append()</div>');
$(".mainDiv").prepend('<div class="NewDiv">Using prepend()</div>');
});

This is main Div
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".mainDiv").append('<div class="NewDiv">Using append()</div>');
$(".mainDiv").prepend('<div class="NewDiv">Using prepend()</div>');
});
});
</script>
</head>
<body>
<div class="mainDiv">
<p>This is main Div</p>
<p><button type="button">Create New Div</button></p>
</div>
</body>
</html>
Related Topics
- How to get input textbox value using jQuery
- Get Selected Dropdown Value on Change Event | jQuery
- How to submit a form using ajax in jQuery
- How can I get the ID of an element using jQuery
- Open Bootstrap modal window on Button Click Using jQuery
- How to select an element with its name attribute | jQuery
- How to get the data-id attribute using jQuery
- How to disable/enable submit button after clicked | jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to get the value of a CheckBox with jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.