Adding a dynamically created div to another div with jquery

Question

I am creating two divs:

var div_day=document.createElement("div");
var div_dateValue=document.createElement("div");

I then want to add div_day to an existing calendar div and div_dateValue to div_day:

$('#calendar').append(div_day)                          
$(div_day).append(div_dateValue);

div_day gets added to calendar, but div_dateValue does not get added to div_day, and the script stops there. No errors in the console but it is in a loop and should have more div_days (each with a unique id). I am new to jquery so any help is appreciated.

In my search I have found how to add divs, but not to add a dynamically created div to another dynamically created div.

Thanks for your help!

Kevin

Have you tried creating your div tags using jQuery from the very beginning? var div_day = $("<div>").html("Tuesday"); I'm not entirely sure what your problem is without seeing more code, but it's a thought... — jbrookover
– jbrookover, Commented Jul 25, 2011 at 16:36
If you c/p'd as is, you're missing a semicolon after the first line — tkm256
– tkm256, Commented Jul 25, 2011 at 16:37
@tkm256 Semicolon would not cause this problem because of the carriage return after the line. — Joseph Marikle
– Joseph Marikle, Commented Jul 25, 2011 at 16:39

Joseph Marikle · Accepted Answer · 2011-07-25 16:37:29Z

2

div_day.appendChild(div_dateValue)
$('#calendar').append(div_day)

answered Jul 25, 2011 at 16:37

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

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

Comments

Jeff B · Accepted Answer · 2011-07-25 16:43:01Z

2

Something else must be going on (even with your missing semi-colon). Your example works fine here:

http://jsfiddle.net/P4rh5/

But, instead of creating divs with straight javascript, you can do it with jQuery:

var div_day = $("<div>");
var div_dateValue = $("<div>");

$('#calendar').append(div_day);                        
$(div_day).append(div_dateValue);

Of course, you could do this in a single step:

$('#calendar').append("<div><div></div></div>");

edited Jul 25, 2011 at 16:43

answered Jul 25, 2011 at 16:37

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

2 Comments

Bring Coffee Bring Beer Over a year ago

so if I was setting a bunch of div settings, I would just do it in line? such as: div_day = $("<div id='blah' style='etc etc etc'>");

JJJ Over a year ago

div_day = $( "<div>" ).css( 'color', 'red' ).css( 'width', '10px' ).etc

Najam Awan · Accepted Answer · 2011-07-25 16:41:49Z

1

$('<div><div></div></div>').appendTo("#calendar");

Try this and mark it as answer if it helps

answered Jul 25, 2011 at 16:41

Najam Awan

1,1453 gold badges13 silver badges31 bronze badges

Collectives™ on Stack Overflow

Adding a dynamically created div to another div with jquery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related