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.






Related Topics
  1. How to get input textbox value using jQuery
  2. JQuery Get Selected Dropdown Value on Change Event
  3. How to submit a form using ajax in jQuery
  4. How can I get the ID of an element using jQuery
  1. Open Bootstrap modal window on Button Click Using jQuery
  2. How to select an element with its name attribute | jQuery
  3. How to get the data-id attribute using jQuery
  4. How to disable/enable submit button after clicked | jQuery
  5. How to replace innerHTML of a div using jQuery
  6. How to get the value of a CheckBox with jQuery
  7. How to wait 'X' seconds with jQuery?
  8. How to check if an enter key is pressed with jQuery
  9. How to allow numbers only in a Text Box using jQuery