I want to have a main div and have the ability to dynamically add new divs at the same level as the main div. Something like this:
<div id="main"></div>
<div id="created_div"></div>
Any help would be wonderful
You can use jQuery DOM manipulation methods like append(), appendTo() or html() to add new HTML elements like div, paragraph, headings, image into DOM without reloading the page again.
HTML code can be appended to a div using the insertAdjacentHTML() method. However, you need to select an element inside the div to add the code.
This is the simplest way to modify content dynamically- using the innerHTML property. By using this property, supported in all modern browsers we can assign new HTML or text to any containment element (such as <div> or <span>), and the page is instantly updated and reflowed to show the new content.
$("#parent_div").append('<div id="created_div"></div>');
or if you want the newly created <div>
-s to appear before the others
$("#parent_div").prepend('<div id="created_div"></div>');
$('#main').after('<div id="created_div"></div>');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With