title: How to handle large amount of HTML in a javascript library
body: <p>I was tasked to create a javascript library.<br/>
  The role of this library is to create a complex form with multiple choices/steps on any website. (It means that we don't have access to the website where the form is deployed.)<br/></p>
  
  <p>The code to use the library is the following :</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;&lt;!-- Here should be inserted my HTML form --&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="http://wwww.example.com/path/to/myLibrary.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      (function() {
          var dom = document.getElementById('container');
          var mb = new MLibrary(dom);
          mb.initialize();
      })();
  &lt;/script&gt;
  </code></pre>
  
  <p>Once filled, this form is finally sent to our API endpoint where it is treated.<br/>
  Because of the complexity of the form, I need to create a huge amount of element using javascript. The HTML source code of the form is ~600 lines of HTML<br/>
  Having this much HTML inside a .js file has proved to be ridiculously hard to maintain and horrible to read.<br/>
  Because of performance purpose, I was required to avoid AJAX request as much as possible which means that I should avoid to store the HTML on the server and get it through AJAX.
  <hr/>
  <b>If you can't use AJAX to get HTML, how can you handle a large amount of HTML inside a javascript library in order for it to be maintainable ?</b></p>
  
  <p>I've created a very basic version of this library using JSFiddle :
  <a href="https://jsfiddle.net/xd4ojka2/" rel="nofollow noreferrer">https://jsfiddle.net/xd4ojka2/</a></p>