jQuery Append only adding 1 item

Question

I'm trying to make jQuery append a div to the body of my document multiple times, but for some reason its only appending one item and I'm guessing its the last item in the loop.

$(function(){
  var howManyParticles = 11;
  var bodyWidth = $(document).width();
  var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
  var particleStyle = "background: lightgray;width: 10px;height: 10px;min-height: 10px;min-width: 10px;position: fixed;bottom: 0;left:" + randomSpawn + ";";
  var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");

  function spawnParticles(){
    for(var i = 0; i <= howManyParticles; i++)
    {
      $('body').append(particle);
      console.log('spawned');
    }
  }

  spawnParticles();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This only spawns 1 item to the window, how do i make it so it spawns as many items as i <= howManyParticles is going to be?

EDIT: My Final Code

I forgot that i need to put the math.random function within the loop to give a different horizontal value to each different particle that was spawned!

$(function(){
    var howManyParticles = 11;
    var bodyWidth = $(document).width();

    function spawnParticles(){
        for(var i = 0; i <= howManyParticles; i++)
        {
            var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
            var particleStyle = "background: lightgray;width: 10px;height: 10px;min-height: 10px;min-width: 10px;position: fixed;bottom: 0;left:" + randomSpawn + ";";
            var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");
            $('body').append(particle);

        }
    }

    spawnParticles();
});

Zakaria Acharki · Answer 1 · 2016-12-19T15:23:00.197

2

You've to clone the element everytime you want to add it since you cant append the same element several times :

$('body').append(particle.clone());

Hope this helps.

$(function(){
  var howManyParticles = 11;
  var bodyWidth = $(document).width();
  var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
  var particleStyle = "left:" + randomSpawn + "px;";
  var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");

  function spawnParticles(){
    for(var i = 0; i <= howManyParticles; i++)
    {
      $('body').append(particle.clone());
    }
  }

  spawnParticles();
});

.particle{
  background: lightgray;
  width: 10px;
  height: 10px;
  min-height: 10px;
  min-width: 10px;
  bottom: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Random left for every div :

$(function(){
  var howManyParticles = 11;
  var bodyWidth = $(document).width();


  function spawnParticles(){
    for(var i = 0; i <= howManyParticles; i++)
    {
      var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
      var particleStyle = "left:" + randomSpawn + "px;";
      var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");

      $('body').append(particle);
    }
  }

  spawnParticles();
});

.particle{
  background: lightgray;
  width: 10px;
  height: 10px;
  min-height: 10px;
  min-width: 10px;
  bottom: 0;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Dec 19 '16 at 15:23

answered Dec 19 '16 at 14:51

Zakaria Acharki

66,747
15
75
101

Hey, I've tried that clone() function but it doesn't act any differently – Kenziiee Flavius Dec 19 '16 at 14:56
@ZakariaAcharki: Adding `.html()` doesn't make a difference, except that it serializes and discards the cloned element and then parses the HTML and recreates a new one when `.append()` gets the HTML. So it's just more work for no difference. – Dec 19 '16 at 15:02
@KenziieeFlavius that related with the style you've added to the element, you could see the element appended without style, check my snippet. – Zakaria Acharki Dec 19 '16 at 15:03
Thanks @squint for your intervention, it was a css of the div who make it not visible on the body. – Zakaria Acharki Dec 19 '16 at 15:04
@KenziieeFlavius you've to remove the position fixed and to add `px` to the `left` style, check my update. – Zakaria Acharki Dec 19 '16 at 15:08
Yeah, the CSS had me confused at first. – Dec 19 '16 at 15:09
@KenziieeFlavius If you want random left style for every div check my update. – Zakaria Acharki Dec 19 '16 at 15:12

score 2 · Accepted Answer · 2016-12-19T15:09:10.187

2

There are some cases where jQuery automatically clones a node for you, and others where it does not. In this case it does not because it thinks you're actually trying to just relocate a node.

Instead of creating the DOM element in advance, create it in the loop.

$(function(){
  var howManyParticles = 11;
  var bodyWidth = $(document).width();
  var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
  var particleStyle = "float: left; background: orange; border:1px solid red; width: 10px; height: 10px; margin: 5px;";

  // Just a string------v
  var particle = "<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>";

  function spawnParticles(){
      for(var i = 0; i <= howManyParticles; i++)
      {
 // Append the string, which is turned into a new DOM element on each iteration
          $('body').append(particle);
          console.log('spawned');
      }
  }

  spawnParticles();

console.log("FOUND %s PARTICLES", document.querySelectorAll(".particle").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

edited Dec 19 '16 at 15:09

answered Dec 19 '16 at 14:52

Im sure i've done it how you said to but its still doing the same thing, just appending a single node – Kenziiee Flavius Dec 19 '16 at 14:57
@KenziieeFlavius: I updated the demo to show that it creates and finds 12 particles. Remember that your CSS has them sitting nearly on top of each other. – Dec 19 '16 at 15:01
This is great thanks helped me find the source to the problem, I needed to put the `math.random` function within the loop as well so that it equalled to a different value each time, that was my bad but thanks so much this works! – Kenziiee Flavius Dec 19 '16 at 15:07
@KenziieeFlavius: That makes sense. :) – Dec 19 '16 at 15:10

score 1 · Answer 3 · edited May 23 '17 at 11:45

Actually the problem is that you create ONE node when you do

 var particle = $("<div class='particle' style=''>&nbsp; Particle div</div>");

As referenced in other Stack Overflow questions, like this one:

jQuery Appending an Object multiple times

You just have ONE html node and you are appending it to the body multiple times in the loop, so is actually the same node being deleted and moved in the DOM. If you want multiple nodes, you should clone the element like

$('body').append(particle.clone());

just as other anwsers tell you.Other option is to instantiate the node inside loop, just like this:

$(function(){
var howManyParticles = 11;
var bodyWidth = $(document).width();
var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
var particleStyle = "background: lightgray;width: 10px;height: 10px;min-height: 10px;min-width: 10px;position: fixed;bottom: 0;left:" + randomSpawn + ";";


function spawnParticles(){
    for(var i = 0; i <= howManyParticles; i++)
    {
        var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");
        $('body').append(particle);
        console.log('spawned');
    }
}

spawnParticles();
});

Hope it helps :)

jQuery Append only adding 1 item

3 Answers3