Tuesday, June 2, 2009

IE6 crashes on JQuery append() function

This is a problem only on IE6 as I know. (IE7 and Firefox3 are tested.) This is my JQuery code that causes IE6 crashed.

var table = $("#contact_list");table.empty();$("group",data).each(function(){var group_name = $(this).attr("name");table.append("<tr><td>"+group_name+"</td></tr>");$("user",$(this)).each(function(){var username = $(this).text();table.append("<tr><td>"+username+"</td></tr>");});});

When I saw IE6 crashed, I tried to figure out what was the problem and found it was an append function. So I tried to implement the code in many ways and I saw something.

It will crashes if the html string as an argument of the function is not a properly dom object or closed tag. For example

var box = $("#contact_list");box.append('<table>');//do something.....box.append('</table>');

So I solved this problem by define an variable for collecting all the html string which I want to append and append it by append() in the end. And the code works fine on IE6.