.innerHTML不工作或我使用它错了吗？

Question

如果我理解正确,.innerHTML应该覆盖某个div或span中的任何内容.例如:

<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">123obama@whitehouse.com</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="vova@kremlin.ru" 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>

因此,点击#addEmail按钮后,内部的所有内容都将被删除并替换为"12345".

但实际上它并没有对那个跨度做任何事情,只是在脚本所在的地方打印出12345.

什么想法可能是错的？

Answer 1

HTML 无效 - 你不能包装<tr>一个<span>.浏览器正在对您的代码执行错误恢复,并生成一个与您预期不同的DOM.当您尝试编辑跨度的内容时,跨度可能不是您认为的位置.

...你也不能在表行之间放置脚本.

...并且您尝试在文档中存在链接之前将事件处理程序绑定到链接.您需要移动脚本以使其显示在链接之后,或者将执行工作的代码移动到链接存在之后运行的事件处理程序(例如ready事件).