Question

Possible Duplicate:
Is there a best practice for generating html with javascript

I want to generate large parts of a website with JavaScript.

The straightforward way is to form one large string containing all the HTML:

'<div>'
   + '<span>some text</span>'
   + '<form>'
      + '<input type="text" />'
...

But this gets quite annoying when one has to write a few hundred lines in this style. And the pain when such code has to be changed later on…

Can you think of an easier way?

Answer 1

Create snippets as templates, put them into an invisible <div>:

<div style="display: none">
   <div id="template1">
      <h2 class="header_identifyingClass">Hello from template</h2>
   </div>
   <div id="template2">
      <span class="content">Blah blah</span>
   </div>
</div>

Then find it,

document.getElementById("template1"); 

fill it’s internal values, e.g. find inside elements by XPath or jQuery and fill them e.g. using element.innerHTML = "Hello from new value", and move or copy it to the visible part of DOM.

Create multiple templates and copy it multiple times to generate many.
Don’t forget to change the ID for copies to keep it working.

PS: I think I used this approach in the code of JUnitDiff project. But it’s buried in XSLT which serves another purpose.