Creating element using jQuery and adding style attributes

Question

I have the following script. I haven't shown it, but I later further manipulate the DOM. I get identical results on test 1 and test 2, but get different results using test 3. What is different with test 3? Please confirm that the impact of test 1 and test 2 is identical. If you feel test 3 must provide identical results, I will post my complete code to a fiddle to prove that it isn't.

var thead_cells=$('#myTable').children( 'thead' ).find('tr').eq(0).find('th'),

var shimRow=$('<tr />',{height:0,padding:0,margin:0});

for (var i = 0; i < thead_cells.length; i++) {

    //test 1
    shimRow
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true)})
        .css('padding',0)
        .css('margin',0)
        .html(''));

    //test 2
    shimRow
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true), css:{padding:0, margin:0}})
        .html(''));

    //test 3
    shimRow
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true), padding:0, margin:0})
        .html(''));

}

T.J. Crowder · Accepted Answer · 2015-05-19 15:59:29Z

2

Whether test 1 and test 2 are identical will depend entirely on the styling you have assigned to the td element by stylesheets. In test 2, you're overriding any stylesheet-assigned padding and margin; in test 1, you're not.

Test 3 doesn't work because padding and margin are not properties you can directly assign to td elements; that's why there's the css part of the previous two, which calls jQuery's css function (in jQuery 1.8 and above).

It's worth having a really good read through the jQuery(html, attributes) documentation to understand how test 2 works.

answered May 19, 2015 at 15:59

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

user1032531 Over a year ago

Thanks TJ. I spent way to much time on this! I will read your recommended document in detail!!!

Collectives™ on Stack Overflow

Creating element using jQuery and adding style attributes

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related