Dynamically add Div to html page using javascript or jquery

Question

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

Zoltan Toth · Accepted Answer · 2012-06-08 19:30:04Z

8

$("#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>');

answered Jun 8, 2012 at 19:25

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Assuming the original <div> was a child of <body>.

@JonathanM Correct. That was an assumption

emphaticsunshine · Accepted Answer · 2012-06-08 19:25:31Z

6

$('#main').after('<div id="created_div"></div>');

answered Jun 8, 2012 at 19:25

emphaticsunshine

3,7857 gold badges35 silver badges42 bronze badges

This works universally, regardless of what level the original <div> is on.

There is another function insertAfter. But after performs better than insertAfter

Akhi · Accepted Answer · 2012-06-08 19:25:54Z

4

$('<div id="created_div"></div>').insertAfter('#main');

answered Jun 8, 2012 at 19:25

Akhi

2,25218 silver badges25 bronze badges