CODEWITHSUNDEEP
javascriptjquerydomfor-loopappend
István Pálinkás
István Pálinkás

Reputation: 2352

Properly append elements in for loop using jQuery

Assuming that cache["s"].length = 9, and cache["n"] is an element in the DOM tree,

cache[ "c" ] = $("<div/>");
for( n = cache["s"].length; n >= 0; n-- ){cache["n"].append(cache["c"]); }

seems not working, and I have no clue, why. It appends the div element ONCE instead of 9 times.

However, if I say,

cache[ "c" ] = "<div/>";
for( n = cache["s"].length; n >= 0; n-- ){cache["n"].append(cache["c"]); }

it works, I get 9 elements, but they are not properly inserted into the DOM tree.

What is the problem, how could I solve it without losing speed?

Upvotes: 0

Views: 185

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

 cache[ "c" ] = $("<div/>");

Here cache[ "c" ] is a instance of div element and if you try to apend it more than one time it replaces its instance.

But if use cache[ "c" ] = "<div/>"; then it is appending new div element each time.

If you want to use cache[ "c" ] = $("<div/>"); then try appending its clone everytime.

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

cache["c"] is a single element, which mean that when you append it over and over, it doesnt create a new div but take the old one and move it. Use .clone():

cache["n"].append(cache["c"].clone());

Upvotes: 1

Related Questions