title: create new elements using javascript
body: <p>In my Spring web application, for customer registration page I am adding and removing divs containing text, img and a-ref elements. When I write the code inside the same jsp the page works perfectly but according to my requirement when I try to put javascript code into a js file and import it and click add button a new div is inserted along with script code as given below,</p>
  
  <p><img src="https://i.stack.imgur.com/rbPKa.png" alt="in the image below when i press the &#39;+&#39; sign button i intend to call a js function which adds a row with text field and a close button and an img, but instead of this it shows the code"></p>
  
  <p>the js function I am using to add a div is..</p>
  
  <pre><code>function addInputBox() { 
  var ni = document.getElementById('myDiv'); 
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  
  newdiv.setAttribute('id',divIdName); 
  var htmlString  = '&lt;div style="margin-top: 5px"&gt;&lt;input type="text"name="service_name" title="Service Name" maxlength="200" style="width:400px;vertical-align:middle;"/&gt;'+ 
                              '&lt;a href="javascript:removeInputBox(\''+divIdName+'\')"&gt;&lt;img src="&lt;c:url value="/resources/img/common/x.png" /&gt;" alt="" style="vertical-align:middle;margin-left: 5px"/&gt;&lt;/a&gt;'+
                              '&lt;img src="&lt;c:url value="/resources/img/ope/new.png" /&gt;" style="vertical-align:middle;margin:2px 0 0 2px;margin-left: 5px" /&gt; &lt;/div&gt; ';
  
  newdiv.innerHTML = htmlString; 
  ni.appendChild(newdiv);} 
  </code></pre>
  
  <p>any idea what may went wrong? any help would be greatly appreciated..</p>