Assign a block of HTML in a Javascript variable

The HTML block can be assigned to a Javascript variable in many ways. Sometimes it's really necessary to assign a block of HMLT into a Javascript variable. Javascript variables are little sensitive about the quotes, new lines. Following are most used approaches to assign HTML block o Javascript variable:

1. Single quote with backslash

var inputHTML = '<table cellpadding="8"> \
    <tr class="block-header"><th colspan="6" >Germany</th></tr> \
    <tr class="table-body"> \
      <td class="bigger-cell">Berlin</td> \
      <td>20</td> \
      <td>10</td> \
      <td>30</td> \
      <td>60</td> \
      <td>90</td> \
    </tr> \
  </table>';

2. Using single quote

var inputHTML = '<table cellpadding="8">'+
    '<tr class="block-header"><th colspan="6" >Germany</th></tr>'+
    '<tr class="table-body">'+
      '<td class="bigger-cell">Berlin</td>'+
      '<td>20</td>'+
      '<td>10</td>'+
      '<td>30</td>'+
      '<td>60</td>'+
      '<td>90</td>'+
    '</tr>'+
  '</table>';

3. Using array with join function

var inputHTML = [
'<table cellpadding="8">',
    '<tr class="block-header"><th colspan="6" >Germany</th></tr>',
    '<tr class="table-body">',
      '<td class="bigger-cell">Berlin</td>',
      '<td>20</td>',
      '<td>10</td>',
      '<td>30</td>',
      '<td>60</td>',
      '<td>90</td>',
    '</tr>',
  '</table>'
].join('');  

Comments