Question

I have a big chunk of HTML which is a template for some data added using AJAX. I would like to store the chunk in a variable and then do replacements on tokens in it but I don’t want to mess up the formatting of the html to get it into a javascript string. Is there a thing like the

<<END 

command in perl which will read everything following into a string until it hits the end token?

Answer 1

No, unfortunately, there is no such construct in JavaScript.

You have a few different options, each with its own merits:

1. String concatenation

   :

   var html = '<div id="something">' +
                  '<p>Lots of HTML</p>' +
                  '<p>Lots of HTML</p>' +
                  '<p>Lots of HTML</p>' +
              '</div>';
   

2. Escaping the newline

   :

   var html = '<div id="something">\
                  <p>Lots of HTML</p>\
                  <p>Lots of HTML</p>\
                  <p>Lots of HTML</p>\
               </div>';
   

3. Array joining

   :

   var html = [
       '<div id="something">',
           '<p>Lots of HTML</p>',
           '<p>Lots of HTML</p>',
           '<p>Lots of HTML</p>',
       '</div>'
   ].join('');
   

4. Storing it in an arbitrary hidden element

   :

   HTML:

   <textarea id="template" style="display:none;">
       <div id="something">
           <p>Lots of HTML</p>
           <p>Lots of HTML</p>
           <p>Lots of HTML</p>
       </div>
   </textarea>
   

   JavaScript:

   var html = document.getElementById('template').value;
   

   I prefer using <script type="text/html">s or HTML comments but <textarea>s seem to be quite popular.

5. Using a full-on templating engine such as

   :

   • http://embeddedjs.com/
   • http://jtemplates.tpython.com/
   • Also see: http://ejohn.org/blog/javascript-micro-templating/