CODEWITHSUNDEEP
javascriptjquery
Ali
Ali

Reputation: 267287

Jquery append() isn't working

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?

Upvotes: 0

Views: 3743

Answers (7)

pbrodka
pbrodka

Reputation: 1137

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.

Upvotes: 1

Ali
Ali

Reputation: 267287

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

Upvotes: 0

eu-ge-ne
eu-ge-ne

Reputation: 28153

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);
});

Upvotes: 1

Jarrett Meyer
Jarrett Meyer

Reputation: 19593

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.

Upvotes: 1

SilentGhost
SilentGhost

Reputation: 319949

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

Upvotes: 0

Michal M
Michal M

Reputation: 9480

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);
   //  ^
}

Upvotes: 2

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103145

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

should be

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

Upvotes: 5

Related Questions