Question

    $('<a />').attr({
        'href': '#'
    })
    .append(
        $('<img />').attr({
            'id'    : 'img',
            'src'   : 'edit.png'
    }))
    .appendTo('body');

Is the the “right way” to go about adding <a href="#"><img src="edit.png" id="img" /></a> to the body?

Also how would I add some css onto the img?

Answer 1

You can put all that directly into the jQuery() since version 1.4.x

$('<a />', {
    'href': '#'
})
.append(
    $('<img />', {
        'id'    : 'img',
        'src'   : 'edit.png',
        'css'   : {
            'width'  :  '100px',
            'height' :  '30px'
        }
}))
.appendTo('body');

This even works with events and data, you can say

$('<div/>', {
     id:    'myID',
     class: 'myCLASS',
     css:   {
         position: 'absolute'
     },
     click: function(e){
         alert(e.target.id);
     },
     data:  {
         foo:  'bar'
     }
}).appendTo(document.body);