Question

I just wanted to know the differences between the methods of adding html in jquery.
both will do samething right?

$('body').append($("<div><img src='somesource' alt='something'></div>"));

and

var div = $("<div>");
var img = $("<img>").attr({"src" : "somesource", "alt" : "something"});
div.append(img);
$('body').append(div);

which is the best practice to follow?

Answer 1

The second is better. Because you often see people doing this:

var alt = 'This is " the title containing a double quote';
$('body').append($('<div><img src="somesource" alt="' + alt + '"></div>'));

and then wonder why something got eaten :-). Whereas when you use the second you have absolutely nothing to worry about:

var alt = 'This is " the title containing a double quote';
var div = $('<div>');
var img = $('<img>').attr({ src : 'somesource', alt : alt });
div.append(img);
$('body').append(div);

---

UPDATE:

I was too hasty in saying that you have nothing to worry about with the second approach. As others have already pointed out you have to worry about performance.