How to append div by id using jquery

Question

I am trying to do infinite scroll with a bunch of products. I would like to append a div with id products when I get near the bottom of the page. I am trying this but this will not work

 $(window).scroll(function() {
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
    $('#container').append(('#products'));
  }
});

it just outputs the word products.

as a side note how can i make it so the id contains a number in it. for exmaple

$('#container').append(('#products[i]'));

where i is a number that goes up.

Answer 1

try the below

$(window).scroll(function() {
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      $('#container').append($('#products'));
   }
});

you where just adding the text instead of the actual element.

Answer 2

Forked from @Vilsad P P... you are still adding the element handle and not the content in the element... This one adds the actual content:

$(window).scroll(function() {
    if ($(window).scrollTop() >= $(document).height() - 
    $(window).height() - 10) {
        $('#container').append($('#products').html());
    }
});

$('#products').html() is the content in the element but $('#products') is just a reference to the element

Now for appending by id, you can do this:

var count = 0;
$(window).scroll(function() {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        var elem = "#products" + count;
        $('#container').append($(elem).html());
        count++;
    }
});

What this does is it takes a variable with a string that matches an actual element, and if the string is a valid selector, for example: $("#products0") , then it will return true. Very legal.