Question

I want create a new <li> component, then add href, class, etc.. and finally place it in another element.

I thought this would work, but it doesn’t:

var points = [1, 2, 3, 4];

$.each(points , function(){
    var $elm = $('<a>'+'Point:'+$(this)+'</a>');
    $elm.css('point');
    $elm.attr('href','http://somelink');
    $('#points_list').append('<li>'+$elm+'</li>');
});

The html code is:

<ul id="points_list"/>

The output is:

Object

Object

Object

Object

Answer 1

That JavaScript is invalid (the first line is a syntax error). I see you’ve corrected it.

I think this may be what you mean (I’ve had to guess at the css bit, I assume you meant to add that as a class) (live copy):

var points = [1, 2, 3, 4];

$.each(points, function(index, point) {
    var anchor, li;

    anchor = $('<a>Point:' + point + '</a>');
    anchor.addClass('point');
    anchor.attr('href','http://somelink');
    li = $("<li>");
    li.append(anchor);
    $('#points_list').append(li);
});

But it can be simpler:

var points = [1, 2, 3, 4];

$.each(points, function(index, point) {
    $('#points_list').append(
        '<li><a class="point" href="http://somelink">Point:' + point + '</a></li>'
    );
});

I’d also recommend looking up the points_list once and then reusing the reference:

var points = [1, 2, 3, 4];
var list = $('#points_list');
$.each(points , function(index, point){
    list.append(
        '<li><a class="point" href="http://somelink">Point:' + point + '</a></li>'
    );
});

…since even looking things up by id is not free.