New javascript HTML element doesn't follows css rule

Question

I have an issue when i'm trying to add rows in a table using Javascript and jQuery.

My code:

<script>
$(document).ready(function(){
   for (i=0; i<myvar.length; i++){
      $("#items").after('<tr class="item-row"><td class="item-name"></td></tr>');
    }
});
</script>

My problem is that the new row did not take the style of my CSS file. CSS file loaded in <head>.

Did i miss something?

if #items is the table, then you should use $("#items").append, not .after to add the elements to the table, not next to it. — pawel
– pawel, Commented Apr 26, 2016 at 10:47

Wowsk · Accepted Answer · 2016-04-26 10:53:47Z

1

Use .append instead of .after because .after is adding tr outside of the table that's why the CSS is not applying:

for (i=0; i<5; i++){
      $("#items").append('<tr class="item-row"><td class="item-name"></td></tr>');
}

edited Apr 26, 2016 at 10:53

Wowsk

3,6852 gold badges20 silver badges30 bronze badges

answered Apr 26, 2016 at 10:47

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

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

1 Comment

Panos Angelopoulos Over a year ago

@Wowsk and Dhara_Parmar this is the correct answer. I'm feeling fool right now because i did not check it before. Thanks!

Collectives™ on Stack Overflow

New javascript HTML element doesn't follows css rule

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related