Javascript, jQuery pattern to create HTML document

Question

I'm not sure if I'm asking the right question or not. But my application heavily relies on Javascript and jQuery to create HTML document. So I have a lot of this "jQuery(") and then a lot of div.attr("id","123").

So, is there a better way to do this, or some design pattern to deal with this?

Thanks a lot.

If you want a tchnology that is proven and available in browsers back to IE6, then look at XSLT. You can load an XML document via xmlHTTPRequest, apply an transform to turn it into HTML and insert it into the document. It takes just a few lines of code (the AJAX part is only a few lines of code too, use jQuery if you must). It's well documented, available in all modern browsers, is native to the browser so very fast and doesn't require any additional library so it's very portable. It's also supported by a large number of non-browser environments. — RobG
– RobG, Commented Sep 28, 2011 at 23:57
Some useful links for XSL Transforms: Mozilla documentation for W3C compliant browsers, Microsoft documentation for IE and clones — RobG
– RobG, Commented Sep 29, 2011 at 0:13
Oh, man, don't get me started on XSLT. Firefox doesn't support autoescaped HTML (stackoverflow.com/q/2175678/901048), Chrome doesn't support @includes (stackoverflow.com/q/2042178/901048), and IE seems to do whatever it feels like doing. Not to mention that it seems to use its own unique language, using syntax like "choose" and "when" instead of "case/switch" or "if/then" like every other programming language. XSLT was a good idea which failed to take off and has been neglected by browser developers for years — Blazemonger
– Blazemonger, Commented Sep 29, 2011 at 12:40

amosrivera · Accepted Answer · 2011-09-28 23:13:33Z

3

Yes, jQuery Templates. They make it easier to build html with jQuery, you can do:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<ul id="movieList"></ul>

<script>
var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
    { Name: "The Inheritance", ReleaseYear: "1976" }
];

/* Render the template with the movies data and insert
   the rendered HTML under the "movieList" element */
$( "#movieTemplate" ).tmpl( movies )
    .appendTo( "#movieList" );
</script>

And get:

The Red Violin (1998)
Eyes Wide Shut (1999)
The Inheritance (1976)

answered Sep 28, 2011 at 23:13

amosrivera

26.6k9 gold badges70 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Blazemonger Over a year ago

...for a given value of "easier". If you want to do anything other than basic Mad-Libs-style templates, jQuery's tmpl can get mighty confusing. Plus they're still considered beta, so the documentation isn't nearly as good as it ought to be. I'm not opposed to them, mind you -- but using them effectively is like learning a whole new language.

amosrivera Over a year ago

@mblase75 If your application heavily relies on js as question mentions it might be worthwhile learning how to use it.

RobG Over a year ago

@amosrivera - better to learn an existing, mature technology supported natively by the browser like XSLT.

amosrivera Over a year ago

@RobG a lot of the jQuery plug ins used now days do not have a year of life nor have been developed by the jQuery team itself. Also knowing that will indeed be in the next jQuery versions it is not a waste to learn how to use it.

RobG Over a year ago

@amosrivera - precisely my point. You can learn something that hasn't been around long, may go away, might be supported, might morph into something else and only works in a limited number of browsers if you first load 100kb of library. Or you can learn a mature technology that works now, is well documented, well understood, very widely supported, is implemented natively in all modern browsers, is supported by standards and portable across systems and environments. The choice is pretty clear to me.

|

Collectives™ on Stack Overflow

Javascript, jQuery pattern to create HTML document

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related