title: Add Struts 2 select drop down list dynamically using JavaScript/JQuery
body: <p>I have a <code>student.jsp</code> page that loads a select drop down list from the database Faculty</p>
  
  <pre><code>&lt;s:select list="ftyList" name="fid" listKey="fid" listValue="name" label="Select a Faculty" /&gt;
  </code></pre>
  
  <p>Now, I've got to add more of the exact same drop down list when I click on Add button. For that I've got a <code>div</code> with Add button and my JavaScript code as below:       </p>
  
  <pre><code>&lt;div id="div"&gt;
      &lt;button onclick="addListFunction()"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>addDropDown.js:</p>
  
  <pre><code>function addListFunction() {    
      var d = document.getElementById("div");
      d.innerHTML += "&lt;p&gt;&lt;s:select list='ftyList' name='fid' listKey='fid' listValue='name' label='Select a Faculty' /&gt;&lt;/p&gt;";
  }
  </code></pre>
  
  <p>The problem is that when I click on the 'Add' button it's only adding an empty space. When used firebug, I could see the Struts tag was being printed the same as above instead of HTML tags.</p>