javascript - Jquery append() isn't working - Stack Overflow

admin管理员组

文章数量:1320633

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

Share Improve this question Follow edited Jun 8, 2009 at 13:11 Ali asked Jun 8, 2009 at 13:04 AliAli 267k268268 gold badges591591 silver badges785785 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

$("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.

本文标签： javascriptJquery append() isn39t workingStack Overflow