Question

If I understand right, .innerHTML should overwrite whatever was in a certain div or span.
For example:

<table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">

  <tr>
    <td colspan="2" align="left">Via Email:</td>
    <td width="1070" align="right"></td>
  </tr>

  <script>
  $('#addEmail').click(function()       { 
document.getElementById('emailList').innerHTML = "12345";
  });  
  </script>

      <span  id="emailList">
   <tr>
    <td width="27" align="left"><img src="icon_mail.png" width="24" height="24"></td>
    <td width="228" align="left">[e-mail]</td>
    <td align="right"><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span>remove</a></td>
  </tr>
     </span>

  <tr>
    <td colspan="3" align="left"><br>
      <input name="input4" type="text" value="[e-mail]" size="20">      &nbsp;&nbsp;
      <a href="#" id="addEmail" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-mail-closed"></span>Add Email</a></td>
    </tr>
</table>

Therefor upon click of #addEmail button, everything inside would be removed and replaced by “12345”.

Yet in reality it doesn’t do anything to that span, but just prints out 12345 in the place, where the script is.

Any ideas what could be wrong?

Answer 1

It’s actually your span that’s wrong. A span can’t … span (I know, I know) over table rows, so it gets opened and closed somewhere between the rows (or outside the table on some browsers), so when you’re overwriting it’s html, it ends up somewhere else.

You should name the tr instead and overwrite its html, that should work.