title: organize HTML inside Javascript functions
body: <p>Consider a Javascript function to add a HTML element to a page. In that function a line where you specify the HTML of the element is needed. But if this HTML is complex, then it can make your code look ugly and difficult to debug. Consider the following example (play attention to the ul.innerHTML like):</p>
  
  <pre><code>function addHTMLField(area,limit) {
          var field_area = document.getElementById(area);
          var all_inputs = field_area.getElementsByTagName("ul");
          var last_item = all_inputs.length - 1;
          var last = all_inputs[last_item].id;
          var count = Number(last.split("_")[1]) + 1;
          if(count &gt; limit &amp;&amp; limit &gt; 0) return;
          if(document.createElement) { //WC3 Dom method
              var ul = document.createElement("ul");
              ul.innerHTML = "&lt;ul style='margin-top: 10px' id='blog_"+count+"'&gt;&lt;li&gt;Blogname:&lt;br/&gt; &lt;input type='text' name='blog["+count+"][name]' size='40' /&gt;&lt;/li&gt;&lt;li&gt;Blog Title:&lt;br/&gt; &lt;input type='text' name='blog["+count+"][title]' id='blogtext_"+count+"' size='40' /&gt;&lt;/li&gt;&lt;li&gt;Username:&lt;br/&gt; &lt;input type='text' name='blog["+count+"][username]' id='blogcategory_"+count+"' size='40' /&gt;&lt;/li&gt;&lt;li&gt;E-Mail:&lt;br/&gt; &lt;input type='text' name='blog["+count+"][email]' id='blogcategory_"+count+"' size='40' /&gt; &lt;br/&gt;&lt;small&gt;A new user will be created if the above email address is not in the database. &lt;br/&gt;The username and password will be mailed to this email address. &lt;/small&gt;&lt;/li&gt;&lt;li&gt;&lt;input type='button' value='Remove Blog' onclick=\"removeItem('blog_"+count+"')\"&gt; &lt;/li&gt;&lt;/ul&gt;";
              field_area.appendChild(ul);                     
          } else {
              alert('an error occurred in the addLinkField function');
          }
      }
  </code></pre>
  
  <p>Is there a better way than this to organize HTML inside Javascript functions? Note that I cannot make all the HTML external to the Javascript because some fields are filled in dynamically.</p>
  
  <p>Thanks for any insights.</p>