Dynamically creating divs with jQuery

Question

Can someone kindly enlighten me why the following code of mine does not work?

   for(var i=0; i<4; i++) {

        var ref = i+1;

        $("#test").append("<div id='t" + ref + "'>In t" + ref + "</div>");
    }

My intention is to create child divs inside 'test' div. But when I check with '$("#test > div").size()', it returns '0'. I've also tried some other alternative including the one mentioned in 'Dynamically Generating Divs with jQuery based on variable number' post, but this also return the same result '0'.

I am using "jquery-1.6.4.js" (also tried with "jquery-1.6.2.js").

Hope someone can point out what am I doing wrong.

@nyeinzay, that would be the problem, then. See Greg Pettit's answer. — Frédéric Hamidi
– Frédéric Hamidi, Commented Nov 1, 2011 at 6:25
@ Frédéric: Thx. That's indeed is the problem. Now solved after wrapping up with a 'ready' handler. — nyeinzay
– nyeinzay, Commented Nov 1, 2011 at 7:25

Greg Pettit · Accepted Answer · 2011-11-01 06:07:43Z

3

Everything is fine. You are probably trying to execute that code before jQuery is loaded or the DOM is ready, but then you are testing with the .size() function once everything is in place.

Make sure you wrap it all up in the document ready function and you should be good.

answered Nov 1, 2011 at 6:07

Greg Pettit

10.8k5 gold badges57 silver badges73 bronze badges

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

1 Comment

nyeinzay Over a year ago

Thanks, Greg Pettit. Now I know that the problem is with me, not with the code :). I just pick-up javascript and jQuery 2 days ago (for my school project) and still need to learn a lot.

ValeriiVasin · Accepted Answer · 2011-11-01 06:04:49Z

2

Everything is OK in your code. See here

And see another approach of creation elements here.

answered Nov 1, 2011 at 6:04

ValeriiVasin

8,73611 gold badges60 silver badges79 bronze badges

1 Comment

nyeinzay Over a year ago

Thanks, InviS. It seems I've got to read a few more things about javascript and jQurey to apply it correctly.

Moe Sweet · Accepted Answer · 2011-11-01 06:08:00Z

0

For a better practice put $ function for the HTML code

 $("#test").append( $ ("<div id='t" + ref + "'>In t" + ref + "</div>") );

And try

$("#test > div").length

or

$("#test>div").length

answered Nov 1, 2011 at 6:08

Moe Sweet

3,7013 gold badges37 silver badges46 bronze badges

3 Comments

Greg Pettit Over a year ago

Since you don't actually NEED the $ for this to work, I'm curious (in a "I want to learn" way, not a sarcastic way) about why this is a better practice. I get that it's making a node before appending, but doesn't jQuery just do that implicitly if you don't do it explicitly?

Moe Sweet Over a year ago

I don't actually know it too. I got it from K++ multiple gold dudes from SO. :)

nyeinzay Over a year ago

Thanks, Moe Sweet, for the suggestion.

Collectives™ on Stack Overflow

Dynamically creating divs with jQuery

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related