title: createElement Image Source
body: <p>I'm dynamically adding rows/fields in this code.  I have a text field for the date, and next to it is a calendar button/image, which the user can use to select the appropriate date.  However, if I click the "Add New Item" button to add a new row, I can't quite get this image to re-appear correctly for the calendar.  The rows are being added, and the field is added for the calendar button, but it isn't locating my image source and I can't select it to pick a date.  Can someone tell me what I'm doing wrong and what can correct it?  Thanks.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script language="javascript"&gt;
  function addNewItem()
  {
      var iX = document.getElementById("txtIndex").value;
      iX ++;
      document.getElementById("txtIndex").value = iX;
  
      var tbl = document.getElementById("tblOffsetDetail").getElementsByTagName("TBODY")[0];
      var tr = document.createElement("TR");
      tbl.appendChild(tr);
  
      //txtOffsetDateCleared1
      var tdOffsetDateCleared = document.createElement("TD");
      tr.appendChild(tdOffsetDateCleared);
  
      var p = document.createElement("P");
      tdOffsetDateCleared.appendChild(p);
  
      var txtOffsetDateCleared = document.createElement("input"); 
      p.appendChild(txtOffsetDateCleared);
  
      var imgOffsetDateClearedCalendar = document.createElement("img"); 
      p.appendChild(imgOffsetDateClearedCalendar);
  
      txtOffsetDateCleared.id = "txtOffsetDateCleared" + iX;
      txtOffsetDateCleared.setAttribute('size',10);  //Set width using HTML   
      //txtOffsetDateCleared.style.width = '85px';  //Set width using CSS
  
      var txtOffsetDateCleared1 = document.getElementById("txtOffsetDateCleared1");
      var i = 0;
  
      for (i = 0; i &lt; txtOffsetDateCleared1.children.length; i++)
          {
              var opt = document.createElement("option");
              opt.value = txtOffsetDateCleared1 [i].value;
              opt.innerText = txtOffsetDateCleared1 [i].innerText;
              txtOffsetDateCleared.appendChild(opt);
          }       
  
      //imgOffsetDateClearedCalendar  
      var imgOffsetDateClearedCalendar1 = document.getElementById("imgOffsetDateClearedCalendar1");
      var i = 0;
  
      for (i = 0; i &lt; imgOffsetDateClearedCalendar1.children.length; i++)
          {
              var opt = document.createElement("img");
              opt.setAttribute('src', '../images/cal.gif');
              opt.setAttribute('Pick a date', 'alternate text');
              opt.setAttribute('height', '16px');
              opt.setAttribute('width', '16px');
              //opt.value = imgOffsetDateClearedCalendar1 [i].value;
              //opt.innerText = imgOffsetDateClearedCalendar1 [i].innerText;
              imgOffsetDateClearedCalendar1.appendChild(opt);
          }
  &lt;/script&gt;
  &lt;/head&gt;
  
  
      &lt;body&gt;
      &lt;table width="99%" border="1" cellpadding="2" cellspacing="2" class="WebApps" id="tblOffsetDetail"&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
      &lt;input type="button" class="button" value= "Add New Item" id="btnNewItem" name="btnNewItem" onClick="javascript:addNewItem();"&gt;
      &lt;input type="text" id="txtIndex" name="txtIndex" value="1"&gt;
  &lt;td&gt;&lt;p&gt;&lt;a href="javascript:NewCal('txtOffsetDateCleared1','mmmddyyyy')"&gt;
                  &lt;input name="txtOffsetDateCleared1" type="text" id="txtOffsetDateCleared1" size="10" maxlength="10"&gt;
                  &lt;img src="../images/cal.gif" width="16" height="16" border="0" alt="Pick a date" id="imgOffsetDateClearedCalendar1" name="imgOffsetDateClearedCalendar1"&gt;&lt;/a&gt;&lt;/p&gt;       
  
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>