css not being applied to html elements created with jQuery .append()

Question

So I know this is probably horrible programming practice, but I'm in a bit of a time crunch, and basically I have a tag within my code, and upon clicking a button on the screen, I'm trying to append a bunch of code inside that div. However, I've noticed two things. One, my other javascript crashes UNLESS the appended code is all on one line, and two, my css style sheets aren't being applied to the code even though I've assigned classes. Here's the relevant code:

            $("#results").append("<ul class='sdt_menu'>");
            for(i=0; i < progression[max].length;i++)
            {
                $("#results").append(
            "<li><a href='#'><img src='images/youAreHere.jpg' alt=''/><span class='sdt_active'></span><span class='sdt_wrap'><span class='sdt_link'>"+progression[max][i]+"</span><span class='sdt_descr'>hover to view description</span></span></a><div class='sdt_box'>"+jobs[progression[max][i]]['description']+"</div></li>");
            }

            $("#results").append("</ul>");

Any help demystifying this would be greatly appreciated.

Jim H. · Accepted Answer · 2012-07-13 13:13:23Z

4

When you append, you should be appending an entire, complete, closed set of tags. It doesn't work like a stringbuilder. Try instead something like:

var tag = '<ul class="sdt_menu">';
for(var i = 0; i < progression[max].length; i++) {
    tag += '...all of your other list items';
tag += "</ul>";

$(tag).appendTo("#results");

answered Jul 13, 2012 at 13:13

Jim H.

5,5591 gold badge26 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alnitak · Accepted Answer · 2012-07-13 13:36:40Z

4

In your current code, as soon as you add the <ul> it gets automatically closed by the browser (since it's impossible to have unclosed tags in the DOM) and then your <li> are being added to #results too. Or at least, they would be, if it were legal to have an <li> be a child of a <div>.

Instead, you need to append your <li> elements to the <ul>, not to #results:

var $ul = $("<ul class='sdt_menu'>");
for (i = 0; i < progression[max].length; i++) {
    $ul.append(...);
}
$ul.appendTo('#results');

edited Jul 13, 2012 at 13:36

answered Jul 13, 2012 at 13:16

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

Hiral Vadodaria · Accepted Answer · 2012-07-13 13:16:59Z

1

Try this:

 var tag = [];
 var ic=0;
 tag[++ic] = '<ul class="sdt_menu">';
 for(var i = 0; i < progression[max].length; i++) {
     tag += '...all of your other list items';
 }
 tag[++ic] = "</ul>";

 $("#results").append(tag.join(''));

answered Jul 13, 2012 at 13:16

Hiral Vadodaria

19.3k5 gold badges42 silver badges56 bronze badges

Collectives™ on Stack Overflow

css not being applied to html elements created with jQuery .append()

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related