CODEWITHSUNDEEP
javascriptjquery
Shreedhar
Shreedhar

Reputation: 5640

different ways to append html?

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?

Upvotes: 2

Views: 152

Answers (7)

Bergi
Bergi

Reputation: 664405

See also my answer on When do you use DOM-based Generation vs. using strings/innerHTML/JQuery to generate DOM content?

The difference is that you have two variables pointing to the jQuery instances. You might can need them for eventListener-adding or manipulating them lateron in the code.

Also, DOM-based element generation has the advantage of automatically escaping the strings, which is especially useful when designing functions with parameters and absolutely needed for user input.

Therefore, the second method is most often preferred. You can also nest the appending process to make the structure clear (OK, in this example the one-liner would be clear as well):

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

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038730

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.

Upvotes: 2

Jibi Abraham
Jibi Abraham

Reputation: 4696

The second method looks better and there are lesser chances of error. But performance wise, the second method is slower. So if you're going to be doing a lot of appending, I would recommend going with the the first case - albeit, carefully.

Here's a small test case up on JS-Perf comparing the two methods

Upvotes: 2

jwchang
jwchang

Reputation: 10864

Adding a string of HTML content is about 10 times faster

than using second method

Here is a reference

Upvotes: 1

Dessus
Dessus

Reputation: 2177

I believe you are better off using template libraries for inserting objects. An example of one such library is here: http://api.jquery.com/category/plugins/templates/

Those libraries are build for performance and ease the burden on parsing HTML blobs.

Upvotes: 1

Mitya
Mitya

Reputation: 34556

Normally I would say DOM-scripting is the better option (the second approach); it's more structured, and easier to catch issues than by inserting a mass of HTML prepared as a string.

That said, there are performance concerns. Inserting loads of elements via DOM-scripting, particularly in a loop, can cause significant slowdown and there are cases where inserting as a string is much quicker.

Also, the fewer inserts you do - by whatever means - the fewer repaints/refreshes you force the browser to make. Again, these all require browser attention, so the fewer the better.

Upvotes: 1

Pascal
Pascal

Reputation: 1299

I would prefer the second one as the first one could lead to very long lines and if you need to bind events to certain elements you already have a variable that is pointing to it.

Upvotes: 0

Related Questions