> > $('#exampleCA').append( [
> > '<table style="width:718px;border:2px inset #336699">',
> > '<tr class="exampleRow">',
> > '<td style="text-align:center;color:white;">',
> > 'I was created by jQuery append',
> > '</td>',
> > '</tr>',
> > '</table>'
> > ].join('') );
> I do occasionally look at the source code, but I'm still new
> enough to JavaScript that sometimes (even with 12 years of
> Java under my belt, and a whole slew of other languages going
> back some 40 years) that when I'm faced with new js
> constructs for the first time, about all I can do is stare
> glassy-eyed and go "Huh?" And that's pretty well my reaction
> to the snippet you posted below: "Huh?" :-) Would you be up
> for walking through it verbally, explaining what it's doing?
Sure thing. One way to make it easier to follow code like this is to break
it up into step-by-step instructions instead of the nested code:
// Create an array of strings.
var htmlArray = [
'<table style="width:718px;border:2px inset #336699">',
'<tr class="exampleRow">',
'<td style="text-align:center;color:white;">',
'I was created by jQuery append',
'</td>',
'</tr>',
'</table>'
];
// Join the array elements into a single string,
// by concatenating the original strings.
var htmlString = htmlArray.join('');
// Create a jQuery object for the element with id="exampleCA".
// Use $ as part of the variable name to remind us that
// it's a jQuery ($) object.
var $example = $('#exampleCA');
// Call the append() method of the jQuery object to
// insert the HTML text into the DOM element.
$example.append( htmlString );
Does that make it more clear? Give a shout back with any questions...
-Mike
