How to Create a DIV element using jQuery

$(".mainDiv").append('<div class="NewDiv">Using append()</div>');
$(".mainDiv").prepend('<div class="NewDiv">Using prepend()</div>');

jQuery offers several methods for dynamically adding a <div> element to the DOM, with append() and prepend() being two of the most straightforward options. The append() method inserts the new element as the last child of its parent, while the prepend() method adds the new element as the first child of its parent. These methods provide a convenient and efficient means to manipulate the structure of a webpage using jQuery.

jQuery prepend()

The jQuery prepend() method is an inherent function utilized to insert a specified content at the beginning of the chosen element. This approach is particularly useful for dynamically modifying the content and structure of HTML elements within a webpage using jQuery, providing a seamless way to enhance user interfaces and interactivity.

$(selector).prepend(content, function)

jQuery append()

The jQuery append() method is a built-in feature designed to insert an HTML element at the conclusion of the targeted element. This method proves advantageous for dynamically adding content to HTML elements within a webpage using jQuery, enabling developers to enhance user experiences and customize the structure of the page.

$(selector).append(content,function)

Create a DIV element | jQuery


Create a DIV elemen jQuery
<div class="mainDiv"> </div>
$("button").click(function(){ $(".mainDiv").append('<div class="NewDiv">Using append()</div>'); $(".mainDiv").prepend('<div class="NewDiv">Using prepend()</div>'); });
run this source code 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>

Conclusion

Creating a <div> element using jQuery can be achieved by employing methods like append() to add elements at the end, or prepend() to add them at the beginning of the selected element. Both methods facilitate dynamic content insertion, enhancing the structure and interactivity of a webpage by allowing developers to efficiently incorporate new <div> elements.