I have this <ul>

<ul id="select_opts" class="bullet-list" style="margin-left:15px;"></ul>

This javascript code which is meant to go throug a JSON object and add the options to the UL:

$.each(q.opts, function(i,o)
{                        
    var str='';
    str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
    str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
    $("#select_opts").append(str);

});

If I do console.log() I can see that the looping is working. If I do:

console.log($("#select_opts").html());

It shows the HTML being updated as expected. However in the browser window, it shows the UL as empty!

What am I doing wrong?

I have this <ul>

<ul id="select_opts" class="bullet-list" style="margin-left:15px;"></ul>

This javascript code which is meant to go throug a JSON object and add the options to the UL:

$.each(q.opts, function(i,o)
{                        
    var str='';
    str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
    str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
    $("#select_opts").append(str);

});

If I do console.log() I can see that the looping is working. If I do:

console.log($("#select_opts").html());

It shows the HTML being updated as expected. However in the browser window, it shows the UL as empty!

What am I doing wrong?

• javascript
• jquery

7 Answers 7

$("select_opts").append(str);

should be

$("#select_opts").append(str);

you're referring to object by id so you missed #

$.each(q.opts, function(i,o)
{                        
    var str='';
    str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
    str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
    $("#select_opts").append(str);
   //  ^
}

I can't really see what's wrong, but try this instead, just to see if it works...

$(str).appendTo("#select_opts");

Both should work.

Is this a typo?:

$("select_opts").append(str);

Did you mean?:

$("#select_opts").append(str);

UPDATED:

Try this:

$.each(q.opts, function(i, o) {
    var li = $('<li>').attr('id', 'li_' + i);
    var in = $('<input>').attr('type', 'text').attr('id', 'opt_' + i).val(o.option);
    var aa = $('<a>').attr('href', 'javascript:delOpt(' + i + ');').text('Delete');
    li.append(in).append(aa)
    $("#select_opts").append(li);
});

The tag Input should be closed - if don't, when using not valid html in append() on Internet Explorer, the div is not put into DOM tree, so you cannot access it with jQuery later.

I'd imagine input needs to be properly self-closed.

I found the bug, another part of the code was emptying the <ul> when i clicked a certain button.