[jQuery] Building up DOM tree using .append()
Hey folks,
I'm optimizing one of my plugins, and I'm looking to move from
creating HTML within a var and using .html() to add it to the element,
to creating the elements on the fly.
I've tried the below, with no luck because .append() does not accept a
callback, but hopefully someone will understand what I'm trying to do:
jQuery(controlbox).append('<span class="hide">^</span>');
jQuery(controlbox).append('<span class="aheader">' +
settings.header + '</span>');
jQuery(controlbox).append('<div class="ability"></div>', function(){
if (settings.textsizer == true) {
if (curtextsize) { jQuery('body').removeClass().addClass(curtextsize); }
jQuery(this).append('<ul class="fontsize"></ul>', function(){
for (var i=0, len = settings.textsizeclasses.length; i < len; i++) {
jQuery(this).append('<li><a href="#" class="btn-' +
settings.textsizeclasses[i] + '" rel="' + settings.textsizeclasses[i]
+ '">' + settings.textsizeclasses[i].toUpperCase() + '</a></li>');
}
});
}
});
Basically, the code gets as far as <div class="ability" /> in Firebug
- so what i want to happen next is within this DIV, the <ul
class="fontsize" /> is appended, and then each LI element is added.
ANY help is much appreciated.
--
Tane Piper
http://digitalspaghetti.tooum.net
This email is: [ ] blogable [ x ] ask first [ ] private