Saturday, February 14, 2009

jQuery: performance of DOM manipulation

I tried moving some html that didn't have a direct relation to the meaning of my content, but more with layout aspect, to the client-side by writing a jQuery plugin for it. This in order to heighten the separation of concerns. The plugin performs some DOM manipulation in order to apply a drop shadow effect as seen in the following image (left side without plugin applied, right side with):



To accomplish this the crucial part of the plugin performs the following DOM manipulation:


[javascript]
elementToWrap.html(
'<div class="frame" style="width: 157px;">' +
elementToWrap.html() +
'<div class="right_shadow">' +
'<div class="shadow_top_right"></div>' +
'<div class="shadow_right" style="height: 93px;"></div>' +
'</div>' +
'<div class="bottom_shadow">'
'<div class="shadow_bottom_left"></div>' +
'<div class="shadow_bottom" style="width: 143px;"></div>' +
'<div class="shadow_bottom_right"></div>' +
'</div>' +
'</div>'
);
[/javascript]