[jQuery] Re: How to add/remove dynamic blocks of html

[Michael Geary]

> From: James Dempster
> 
> Much nicer to split the lines making it more readable.
> 
> $(this).parent().append([
>     "<p>",
>         "<input type='text' class='"+inputClass+"'",
>         "<button onclick='$(this).parent().remove();return
false;'>x</button>",
>     "</p>"
> ].join(""));

Also, once you're using .join, you don't have to use + inside it; you can
use comma for all your string concatenation. And there's a missing /> in the
input tag, so let's fix that:

 $(this).parent().append([
     "<p>",
         "<input type='text' class='", inputClass, "' />",
         "<button onclick='$(this).parent().remove();return
false;'>x</button>",
     "</p>"
 ].join(""));

Finally, this is purely stylistic, but I like to put the begin tags and end
tags on separate lines to make it easier to make sure they are matched up,
and also (really getting into personal preference here) I like to swap
around the " and ' quote marks, using " as the HTML quote and ' as the
JavaScript quote:

 $(this).parent().append([
     '<p>',
         '<input type="text" class="', inputClass, '" />',
         '<button onclick="$(this).parent().remove();return false;">',
             'x',
         '</button>',
     '</p>'
 ].join(''));

I do the quotes this way because seems a lot more common to use " in HTML
code, and because I type a lot more JavaScript quotes than HTML quotes, so
using ' for the JavaScript quotes makes it a tiny bit easier to type. :-)

-Mike