jQuery append does not apply CSS styling

Question

My jquery code is appending a piece of HTML in code properly, but the CSS styles are not applied after the HTML has been appended.

What is the right way to do it?

This is how I am doing:

if(listone[i] != "")
{
    var l1pos = listone[i];
    $('ul.ulstep1 li').eq(i).addClass('selected');

    $line1= '<div class="tagless ';
    $line2 = i;
    $line2='><div class="tagleft"></div><span>';
    $line2 += listone[i];
    $line3  = '</span><div class="tagright"></div></div>';
    $('.quiztags').append($line1+$line2+$line3);
    $('.quiztags').append($('<div></div>').attr('class', 'tagless'));
}

This gives me the right HTML but no styling is applied. I am doing this operation inside a javascript onload function, so the CSS should have loaded when this is executed, right?

Just eyeballing it and it doesn't look like you're closing your class attribute after $line2 = i; — JaredMcAteer
– JaredMcAteer, Commented Oct 4, 2011 at 14:02
could you post the html that is generated? (via firebug or equivalent), and if the html is valid? — jackJoe
– jackJoe, Commented Oct 4, 2011 at 14:03
The statement '$line2 = i; does nothing as line2 it is overwritten in next line — Muleskinner
– Muleskinner, Commented Oct 4, 2011 at 14:12
By the way, you could avoid syntax issues like this by using .addClass instead. Something like this: $('<div/>').addClass('tagless').addClass(i).appendTo($('.quiztags')); — Blazemonger
– Blazemonger, Commented Oct 4, 2011 at 14:13
@Muleskinner good point, still line2 is not closing the class attribute. — JaredMcAteer
– JaredMcAteer, Commented Oct 4, 2011 at 14:19

vietean · Accepted Answer · 2011-10-04 14:14:32Z

1

Try it, maybe it works.

if(listone[i] != "")
{
    $('ul.ulstep1 li').eq(i).addClass('selected');
    var line1   = '<div class="tagless ';
    var line2   = i;
    line2       += '"><div class="tagleft"></div><span>';
    line2       += listone[i];
    var line3   = '</span><div class="tagright"></div></div>';
    $('.quiztags').append(line1+line2+line3);
    $('.quiztags').append($('<div></div>').attr('class', 'tagless'));
}

answered Oct 4, 2011 at 14:14

vietean

3,0519 gold badges44 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

jQuery append does not apply CSS styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related