Is this the right way to setup up an image within a link?

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

TIMTOWTDI aside, yes, it is one way of doing it. Remember, there is no "right" right way. If it works, it means that you are on the right track.

Also, being right is relative.

Answer 2

$('<img/>').attr({
     'id'    : 'img',
     'src'   : 'edit.png'
 }).css({/* css here*/})

more on .css()

Answer 3

Not really recommended to do inline styles, but an example of CSS on an image is :

<img style="display:block;" src="##.jpg" />

Answer 4

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);