Appending object instead of reference

Question

I'm trying to add multiple div's within a div inside for loop:

  for( i=0; i<10; i++ )
  {
      $('#parent').append('<div class="child"></div>");
  }

This works perfectly, but when I do:

  for( i=0; i<10; i++ )
  {
      var child = $('<div/>', { class: 'child' });
      $("#parent").append(child);
  }

I get very strange results, I believe it's because using the second method, the reference instead of the object itself is passed. How can I pass just pure object, no reference, to the append method? thanks!

your code looks just fine for me - jsfiddle.net/arunpjohny/po6uxpLf/1 - if the child object is created within the loop — Arun P Johny
– Arun P Johny, Commented Mar 26, 2015 at 9:03

JNF · Accepted Answer · 2015-03-26 09:01:50Z

Use jQuery cloning

$("#parent").append(child.clone());

You are appending the same object over and over, so nothing happens. It's just taking the element and putting it back in the same place.

The clone makes sure it's a fresh object which is a copy of the original.

Out of above link:

Consider the following HTML:
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
... given the code:

$( ".hello" ).appendTo( ".goodbye" );

The resulting DOM structure would be:
<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>
To prevent this and instead create a copy of the element, you could write the following:

$( ".hello" ).clone().appendTo( ".goodbye" );

This would produce:
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

Collectives™ on Stack Overflow

Appending object instead of reference

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related