In my application, I sometimes have to create elements dynamically, so I create them in javascript, but it make it hard for maintenance.
For example:
The above image is the information window when I click a point in the map, and in our application we have a similar requirement, we use javascript to create the whole DOM.
I do not think this is a good idea, any suggestion?
You can extract the JS-generated HTML into the templates instantiated on the client side. Check out JQuery templates for example:
http://api.jquery.com/category/plugins/templates/
Example:
<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
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>
display: none. And good news: Prototype has templates (details in my answer).Another approach using plain jQuery (I don't know Prototype, but I guess you can do the same thing pretty similar):
<div id="template" style="display: none">
Hello, <span class="name">[world]</span>
</</div>
function render(name) {
$('#template').clone().removeAttr('id')
.find('.name').text(name).end()
.appendTo('body').show();
}
render("Stack Overflow");
render("..and world");
The idea is pretty simple: put your template hidden in HTML. When you need it, find it by id, remove this id, replace the data and add the newly created element where you want it.
You've said you're using Prototype. You could make use of its Template class. You could even store templates on the server and demand-load them via ajax if you like (although I'd worry about the number of HTTP requests), in order to keep your code and your markup completely distinct.
For instance, here's a Prototype template for building a table row:
<tr><td>#{name}</td><td>#{description}</td></tr>
You have various options for where and how to store the template text:
display: none, extract them as HTML, and then reuse them.In all three of those cases, eventually you end up with a string containing the template text, e.g.:
var rowString = "<tr><td>#{name}</td><td>#{description}</td></tr>";
(But again, you may not need to put it actually in the JavaScript.)
From the string, you make a template:
var rowTemplate = new Template(rowString);
And then use it:
$('tableBodyId').insert({
bottom: rowTemplate.evaluate({
name: bizobject.name.escapeHTML(),
description: bizobject.description.escapeHTML()
})
});
Note that (sadly) you do have to do the HTML escaping yourself (because Prototype's templates aren't specifically tied to HTML, you can use them for any situation where you have a templated string). Or you can make a fairly small change to the Template class to do it for you (that's what I did, when I was using Prototype; I actually made it possible to call functions on template items).
insert or what-have-you).
innerHTMLto append it. This is bad in most cases. Or use the DOM API to create the elements which is perfectly fine to do so. Of course it will still be tedious for complex elements.