Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically add Div to html page using javascript or jquery

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

like image 312
jardane Avatar asked Jun 08 '12 19:06

jardane


People also ask

How dynamically add HTML element using jQuery?

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.

Can I add div in JavaScript?

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.

Can JavaScript put dynamic text into an HTML page?

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.


2 Answers

$("#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>');
like image 108
Zoltan Toth Avatar answered Sep 21 '22 19:09

Zoltan Toth


$('#main').after('<div id="created_div"></div>');
like image 24
emphaticsunshine Avatar answered Sep 22 '22 19:09

emphaticsunshine