Loop to create multiple div elements? JQUERY

Question

Any idea what's wrong with my code?

var pageLimit=30;

$(document).ready(function() {
 for(var i = 1; i <= pageLimit; i++) {
  $('#test').append('<div id="page' + i + '" class="touch">TESTING</ div>' )
 }
}

What I want is to have that function create as many divs in the body as the pageLimit value. So if someone were to go into the code and change the pageLimit to 50, it would create 50 div tags.

in the body tags, all I have is the test div. I wanted to put it into the body, without inserting it into any other divs. So I tried to replace #test with body, didn't work.

Please help! Thanks.

EDIT: Sorry, I have the ); in my original code I just forgot to copy it here! Yeah, the
tags were before I knew how to insert code into this... lol Sorry. I have ); in my original code, it still doesn't work.

Can you please show some html code - what do you have, and what do you want to have when your code has finished manipulating it? — Tomas Aschan
– Tomas Aschan, Commented Jul 16, 2010 at 14:14
add 4 spaces before all code lines, and it will appear properly on stackoverflow. — Fosco
– Fosco, Commented Jul 16, 2010 at 14:17
To add HTML, edit your question (there should be an edit link when you look at it) and make the code section a bit of code by highlighting it and clicking the 101010 button. — justkt
– justkt, Commented Jul 16, 2010 at 14:18
use a good debugger like firebug to get a good description of the javascript error message... — Michel
– Michel, Commented Jul 16, 2010 at 14:21

Andy Robinson · Accepted Answer · 2010-07-16 14:16:19Z

6

Missing ");" after the last }.

$(document).ready(function () {
    for (var i = 1; i <= pageLimit; i++) {
        $('#test').append('TESTING');
    } 
});

answered Jul 16, 2010 at 14:16

Andy Robinson

7,4772 gold badges32 silver badges20 bronze badges

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

Comments

Ian Wetherbee · Accepted Answer · 2010-07-16 14:18:35Z

2

http://jsfiddle.net/Q6Lnw/2/

You were missing the end of the ready function's )

answered Jul 16, 2010 at 14:18

Ian Wetherbee

6,1492 gold badges31 silver badges31 bronze badges

Comments

Zacho · Accepted Answer · 2010-07-16 14:19:14Z

1

Your issue is a simple syntax problem. You were missing ")". Always make sure to add in line endings too. This works:

$(document).ready(function () {
         for (var i = 1; i <= pageLimit; i++) {
             $('#test').append('TESTING');
         }
     });

answered Jul 16, 2010 at 14:19

Zacho

86112 silver badges20 bronze badges

1 Comment

Zacho Over a year ago

Also: here is the optimized code. This makes one DOM manipulation which will greatly increase performance. var pageLimit = 30, testing = 'TESTING'; $(document).ready(function () { for (var i = 1; i <= pageLimit; i++) { testing += testing; } $('#test').append(testing); });

Lourens · Accepted Answer · 2010-07-16 14:50:54Z

1

$('body').append('<div>TESTING</div>')

Should work. What does your not-working code look like?

answered Jul 16, 2010 at 14:50

Lourens

1,5181 gold badge13 silver badges27 bronze badges

Comments

Fosco · Accepted Answer · 2010-07-16 14:23:04Z

0

How about document.body.innerHTML += 'TESTING'; ?

edited Jul 16, 2010 at 14:23

answered Jul 16, 2010 at 14:16

Fosco

38.6k7 gold badges90 silver badges101 bronze badges

1 Comment

Andy Robinson Over a year ago

This errors with "$(document).body is undefined". As you've wrapped the document as a JQeury object. All you'd need to do is document.body... no need for JQuery.

guzart · Accepted Answer · 2010-07-16 14:42:16Z

0

It seems it's still a syntax problem, you have simple quotes then back quotes in your element string, try removing the backquotes. And of course, make sure you have <div id="test"></div> in your html.

$(document).ready(function() {
   for(var i = 1; i <= pageLimit; i++) {
     $('#test').append('<div id="page' + i + '" class="touch">TESTING</div>' )
   }
});

Unless that's another typo in your question.

answered Jul 16, 2010 at 14:42

guzart

3,73030 silver badges23 bronze badges

2 Comments

Annie Over a year ago

No That is there because when you want to include quotes inside of quotes, the outer quotes should be single quotes, while the inside ones should be double quotes. You can see the differences if you use notepad++.. At least thats how my teacher taught me!

guzart Over a year ago

I am talking about the back quote (`). As you can see in the code I placed, I have the single and double quotes too.

Collectives™ on Stack Overflow

Loop to create multiple div elements? JQUERY

6 Answers 6

Comments

Comments

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related