jQuery append on .each

Question

var positions = [ "00", "01", "02", "03", "04", "05" ];
jQuery.each( positions, function(players) {
var playerNotesContent = document.createElement('div');
playerNotesContent.setAttribute('id', 'player_stats_block'+this);
$("#player_stats_block" + this).append (columns); 
})

I would like to know, why the .append command doesn't work with the +this, but while creating div it works. What am I doing wrong? Sorry for my bad English and thanks a lot in advance!

UPDATED!

var positions = [ "00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18" ];

jQuery.each( positions, function(players, value) {

var player_id = $("#ctl" + value).attr("href").match(RegExp('players/([^/]+)/details.php$'))[1];
var playerlink = document.getElementById("ctl" + value);

GM_xmlhttpRequest({
method: 'GET',
url: 'http://www.test.com/players/item/' + player_id,
onload: function(responseDetails) 
{
            var page = jQuery(responseDetails.responseText);
            var columns = jQuery('div.columns',page);
            var playerNotesContent = document.createElement('div');
            playerNotesContent.setAttribute('id', 'player_stats_block'+value);
            playerlink.parentNode.insertBefore( playerNotesContent, playerlink.nextSibling  );
            $('#player_stats_block00').append (columns); 
}
});
});

Like this all values gets appended in #player_stats_block00! I tried several of your answers but i cant get them appended to their correct #player_stats_blockXX. Sorry again for my bad english and thank you all for your help!

Answer 1

Your code is creating a div and setting its id, and then trying to look up that div by that ID. The lookup will fail, because the div hasn't been added to the DOM anywhere yet.

var positions = [ "00", "01", "02", "03", "04", "05" ];

jQuery.each( positions, function(players) {
    // Here you're creating the div
    var playerNotesContent = document.createElement('div');

    // ...and setting its `id` (btw, you can just do playerNotesContent.id = value;)
    playerNotesContent.setAttribute('id', 'player_stats_block'+this);

    // ...and here trying to look it up
    $("#player_stats_block" + this).append (columns); 
});

If you're trying to append the div to columns, you probably want this instead of your last line:

columns.append(playerNotesContent);

(Note that append adds content to the container you call it on.)

That assumes columns is a jQuery object. Otherwise:

$(playerNotesContent).appendTo(columns);

or

$(columns).append(playerNotesContent);

(Note that appendTo adds the content you call it on to the argument you give it; it's the converse of append.)

It's also worth noting that the divs being created have no content, so unless you're styling them, they won't have any dimensions and will be kinda hard to find on the page. :-)

Here's an example assuming columns is a jQuery object, and giving the divs some content so you can see them: Live copy | source

HTML:

<div id="columns"></div>

JavaScript:

jQuery(function($) {

  var columns = $("#columns");
  var positions = [ "00", "01", "02", "03", "04", "05" ];

  jQuery.each( positions, function(players) {
    var playerNotesContent = document.createElement('div');
    playerNotesContent.innerHTML = "Player Stats";
    playerNotesContent.id = 'player_stats_block'+this;
    columns.append(playerNotesContent);
  });  

});