title: How to implement "add new item" functionality in JavaScript?
body: <p>The title isn't very descriptive but I couldn't find a better one. Feel free to edit it.</p>
  
  <p>Basically what I'm looking for is the best way to do the following:</p>
  
  <p><img src="https://i.stack.imgur.com/hZpIP.png" alt="add new item"></p>
  
  <p>When the user clicks "Add New Item", a new row is added with an indentical text box and drop down as above. The options I can think of are the following:</p>
  
  <ul>
  <li>Hardcode the HTML in the JavaScript code. This is obviously a hideously ugly solution.</li>
  <li>Assemble the HTML from DOM nodes (or jQuery objects). This is very ugly too.</li>
  <li>Use a client-side template system. I used one of those once and it was pretty weird (it used <code>&lt;script language="html"&gt;</code> tags to define the templates).</li>
  <li>Make an ad-hoc client-side "template" and hide it somehow with CSS.</li>
  <li>Make an AJAX request to fetch the HTML. This is slow and uses server resources unnecessarily.</li>
  </ul>
  
  <p>What do you suggest? I'm not completely satisfied with any of the above solutions.</p>