Attempting to run a jQuery.clone() within for-loop to append an element x times but getting more than desired output

Question

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
    </head>
    <body>
        <div class="outerContainer">
            <div class="innerContainer">
                <div class="test">test</div>
            </div>
        </div>
        <script
            src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
 
            $(document).ready(function() {
               for(let i=1;i<5;i++) {
                $( ".test" ).clone().appendTo( ".innerContainer" );
                }
            });

    </script>
    </body>
</html>

Desired output:

<div class="outerContainer">
     <div class="innerContainer">
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
    </div>
</div>

Instead I get way more elements, almost 20. I am new to jQuery and learning. I looked into jQuery.each() but it seems that method is geared toward use with arrays + objects.

Also, I am using jQuery because I need to attach eventListeners to all the cloned elements and event delegation is not possible because the elements are not within a parentContainer.

I am also currently testing to see If I can instead use a regular for-loop with cloneNode() which works to append my elements and then possibly using jQuery.each() to attach the eventListeners?

Every time your `clone()` runs again, it's happening for all of the `.test` elements that exist in that moment, which is why they're multiplying exponentially. You're cloning 1, then 2, then 4, etc. — Jon Uleis, Nov 21 '20 at 05:29
I believe this to be correct, I also found an alternative by accident, creating the elements via javascript and executing the script as is works also. — slowstarder, Nov 21 '20 at 06:04

score 1 · Answer 1 · answered Nov 21 '20 at 05:40

You can declare your element which you need to cloned outside your for-loop then use insertAfter(cloned); to insert after that div .

Demo Code :

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Demo</title>
</head>

<body>
  <div class="outerContainer">
    <div class="innerContainer">
      <div class="test">test</div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var cloned = $(".test") //declare this outside
      for (let i = 1; i < 5; i++) {
        cloned.clone().insertAfter(cloned); //insert same
      }
    });
  </script>
</body>

</html>

score 0 · Answer 2 · answered Nov 21 '20 at 05:46

This is because every time you are appending the .test inside the container it is increasing the number of elements with .test class. So clone is cloning all the elements. You can use first to get only the first element and then append it

$(document).ready(function() {
  for (let i = 1; i < 5; i++) {
    $(".test").first().clone().appendTo(".innerContainer");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerContainer">
  <div class="innerContainer">
    <div class="test">test</div>
  </div>
</div>
<script

Attempting to run a jQuery.clone() within for-loop to append an element x times but getting more than desired output

2 Answers2