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

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

Browser View

This is main Div

Full Source | jQuery

<!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>

Next : How to get input textbox value using jQuery

Related Topics