Seperating visual effects from HTML using jQuery

I remember reading Matt Ryall's blog on 10 things every web developer should know a while back and I would like to highlight the clean code suggestion made there.

I'm migrating the existing Aflexi website to Drupal and at one point I came across an existing code which.. is not too ugly but hard to be integrated into its Menu feature. The code has a few divs that jQuery uses to create sliding effects, I could actually put them into the template page.tpl.php but using jQuery to inject them at the end of page is certainly a better practice.

So, in my template.php, I have:

$js[] =<<JAVASCRIPT
$('#nav').append('lots.of.divs'); // Here's the injection
$(document).ready(function() {
UiHelper.registerSlider('a.menu-1-1-2', '#sliderWso', '#pointerWso', 300);
...
});
JAVASCRIPT;
drupal_add_js(join("\n",$js), 'inline');

By the way, I make the divs a one liner using:

echo 'paste your html' | tr -d '\n'

Then, talking about injection, this is brought into my attention as well - jQuery-AOP.

- yc