.innerHTML不起作用，或者我用错了

.innerHTML not working or am I using it wrong?

本文关键字：错了 或者 不起作用 innerHTML      更新时间：2023-09-26

如果我理解正确，.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

有什么想法吗？

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

…也不能在表行之间放置脚本。

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

实际上是您的span出错了。跨度不能。。。span（我知道，我知道）覆盖表行，所以它会在行之间的某个地方打开和关闭（或者在某些浏览器上在表外），所以当你覆盖它的html时，它会出现在其他地方。

您应该改为命名tr并覆盖它的html，这应该会起作用。

不能像那样把<tr>放在<span>中。无论如何，如果你使用jQuery，你可能应该使用它的API围绕".innerHTML"

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

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

您正在将一个<tr>包装在一个span中。这将导致不可预测的结果。特别是如果删除了表行。

相关文章：