title: using javascript to add html div with dynamic elements issues
body: <p>The following script is called upon to dynamically add html input elements.
  There are two issues with the marked code (about 30 lines in) below.</p>
  
  <p>1) Two input boxed should be displayed, when I add the marked code below the second input box (foox1 - "last name") is not being displayed.  </p>
  
  <p>2) The second is that I need id='suggestions' to be dynamic i.e. linked to foox1.  I should be using setAttribute as I have with the rest of the code but I need to get 1) above working first.  </p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
  var x = 1;
  
  function add() {
  var fooId = "foo";
  
  for (i=1; i&lt;=2; i++)
    {
      //Create an input type dynamically.
      var element = document.createElement("input");
  
      //Assign different attributes to the element.
      element.setAttribute("type", fooId+x+i);
      element.setAttribute("name", fooId+x+i);
      element.setAttribute("id", fooId+x+i);
  
      if(i==1){
             element.setAttribute("value", "First name");
             element.setAttribute("onkeyup", "lookup(this.value);");
             element.setAttribute("onblur", "fill();");
  
       }
      if(i==2){
            element.setAttribute("value", "Last name");
  
      }
      var foo = document.getElementById("fooBar");
      foo.appendChild(element);
  
      /************************************************
      This is where the problem is, in this if statement.  
      This part of the code is required for an autofil in the text box
  
      ************************************************/
  
      if(i==1){
          foo.appendChild("&lt;div class='suggestionsBox' id='suggestions' style='display: 
              none;'&gt;&lt;img src='upArrow.png' style='position: relative; top: -12px; left: 30px;'         
              alt='upArrow' /&gt;&lt;div class='suggestionList' id='autoSuggestionsList'&gt;&amp;nbsp;       &lt;/div&gt;    &lt;/div&gt;");
      }
  
      /********************************
      end of code with issues
      ******************************/
  
      var space = document.createTextNode(" ");
      foo.appendChild(space);  
  
  }
          i++;            
              var element = document.createElement("input");
      element.setAttribute("type", "button");
      element.setAttribute("value", "Remove");
      element.setAttribute("id", fooId+x+i);
      element.setAttribute("name", fooId+x+i);    
      element.setAttribute("onclick", "removeRow(this)");
      foo.appendChild(element);
  
      var br = document.createElement("br");
      foo.appendChild(br);
  
      x++;
  
  }
  &lt;/SCRIPT&gt;
  </code></pre>