IE中的innerHTML？答案

【问题标题】：innerHTML in IE?IE中的innerHTML？
【发布时间】：2010-02-21 06:16:27
【问题描述】：

我在使用带有单选按钮的 innerHTML 时遇到了问题。

<table align="center">
 <div class='main'>
  <span id="js" class='info'>
   <label><input type="radio" name="js" value="0" size="<?php echo $row['size']; ?>" onclick="js(this.value, this.size);" /><img src="arrowup.png"/></label>
   <br />
   <label><input type="radio" name="js" value="1" size="<?php echo $row['size']; ?>" onclick="js(this.value, this.size);" /><img src="arrowdown.png"/></label>
  </span>
 </div>
</table>

我的 .js 看起来像这样：

var xmlhttp;

function getVote(a,b) {
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)   {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="js.php";
url=url+"?js="+a;
url=url+"&id="+b;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged() {

  if (xmlhttp.readyState==4) {
  document.getElementById("js").innerHTML=xmlhttp.responseText;
  }
}

function GetXmlHttpObject() {
var objXMLHttp=null;
if (window.XMLHttpRequest)   {
  objXMLHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)   {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
return objXMLHttp;
}

这仅在 IE 中不起作用！有什么帮助吗？

【问题讨论】：

您是否检查过document.getElementById("js") 是否正在查找元素？ innerHTML 可能不是问题。我认为如果您的标记无效，getElementById 可能会失败，如果您不提供文档类型等（如果有的话），这很难说清楚。此外，getElementById 应该返回一个元素——您是否期望它返回一个包含带有id="js" 和带有name="js" 的跨度的集合是一样的。
有关方式名称和 id 冲突存在问题的示例，请参见此处：456bereastreet.com/archive/200802/…
@Andrew Moore:size="<?php echo $row['size']; ?>"与PHP无关？
@John Saunders：这是一个非常非常小的大难题。而且我认为那块已经放错了位置，不需要解决这个特殊的难题。
@Andrew：它可能不需要，但它应该是一个标签。不过，如果你再把它取下来，我不会把它放回去的。

标签： php javascript internet-explorer innerhtml

【解决方案1】：

首先，很确定直接在 TABLE 中的 DIV 是非法标记。

不要使用非法标记。浏览器会对它做出不同的反应（我最近让 Opera 忽略了一些非法的东西，IE 试图渲染它）。

虽然 IE 通常是应得的，但首先要正确标记，然后看看 IE 是如何做的。可能是它未能按照您的预期呈现 DOM。

（FWIW 我在 IE 中遇到了一个 innerHTML 渲染问题，http://support.microsoft.com/kb/276228/，但是对于 SELECT 元素，所以我认为它不适用于这里）。

【讨论】：

【解决方案2】：

问题确实是 table 标记上的 innerHTML。 IE 不支持封装在 table 标记周围的 innerHTML，也不打算在未来的版本中解决此问题。

解决方法是使用 DOM 方法或最简单的方法：将表格包裹在 div 周围。

所以我最终得到了：

<div id="js" align="center"><table>
        <span class='main'>
            <a onClick="getVote(this.value, this.size);" type="radio" value="0" size="<?php echo $row['id']; ?>" /><img src="arrowup.png"/></a>
            <br /><a onClick="getVote(this.value, this.size);" type="radio" value="1" size="<?php echo $row['id']; ?>" /><img src="arrowdown.png"/></a>
            </span>
</table></div>

如果将标签设置为图像，还有另一个 IE 错误会破坏标签。只是一个抬头！我知道当我说 IE 很烂时你不会感到惊讶！

【讨论】：

innerHTML 不包装任何东西... IE 不喜欢部分地重新解析表格的内部，所以用 div 包装一个或多个表格并使用 div.innerHTML。如果您不折腾自己的标签沙拉，就不能怪 IE：... is not valid HTML.

是的，但如果它不是有效的 HTML，那么我想知道为什么它可以在所有其他浏览器上工作......

有关此问题的更多信息：ericvasilik.com/2006/07/code-karma.html Eric 是 innerHTML 的发明者...希望对您有所帮助。

"是的，但如果它不是有效的 HTML，那么我想知道为什么它可以在所有其他浏览器上工作" 因为像 you 这样天真地支持非标准的人代码。抱歉，这就是事实，打破标准是万恶之源，尤其是在网络上。一个拥有大市场份额的浏览器开始做自己的事情，然后其他浏览器复制它，否则他们就会失去市场份额。

令人讨厌的是，当它是有效的 HTML 并且您添加它并且它适用于除 IE 之外的所有浏览器。 HTML5 使 innerHTML 成为规范的一部分，适用于所有可以包含 HTML 的元素。希望这意味着 IE9（2011 年 4 月 12 日到期）将修复 innerHTML！ ;-)

【解决方案3】：

我知道这有点晚了，但这里是如何用 jQuery 解决这个问题：

$("#tableName").html(DataToWrite);

【讨论】：