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为invalid - 您无法将<tr>包裹在<span>中。浏览器正在对您的代码执行错误恢复，并生成一个与您预期不同的DOM。当您尝试编辑跨度的内容时，跨度可能不是您认为的位置。

...你不能在表格行之间放置一个脚本。

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

Answer 2

实际上你的span错了。跨度不能...跨越（我知道，我知道）表行，因此它在行之间（或某些浏览器的表外）之间的某处打开和关闭，所以当你覆盖它的html时，它最终到达其他地方。

您应该改为命名tr并覆盖其应该有用的html。

Answer 3

您不能将<tr>放在<span>内。无论如何，如果你正在使用jQuery，你应该使用它的“.innerHTML”

$('#emailList').html("hello world");

这将为您做一些重要的清理工作。这不是绝对必要的，但除非你确切知道你在做什么，否则它可能是一个更安全的选择。

Answer 4

你在一个范围内包裹<tr>。这将导致无法预测的结果。特别是如果你然后删除表格行。

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

4 个答案: