innerHTML在Firefox中的解析陷阱：tr节点td标签丢失问题

innerHTML在Firefox中的解析陷阱

回顾过往，IE浏览器对innerHTML的处理存在诸多已知特性：它会丢弃标签前的空白字符，将所有内部标签强制转换为大写，展示动态添加的属性，且在部分元素中该属性为只读。这一由IE引入的特性，最终暴露出如此多的缺陷，确实令人遗憾。然而，innerHTML在标准遵循度极高的Firefox浏览器中同样存在一个隐蔽的陷阱，具体表现如下文代码所示：

 
var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
var rowContent = '<td>司徒正美 </td><td><em>RestlessDream</em></td>';
newTr.innerHTML = rowContent;
newTable.appendChild(newTr);
alert(newTable.innerHTML)
if (rowContent.toLowerCase() == newTr.innerHTML.toLowerCase()) {
alert("一定如我所愿！");
}else {
alert("你踩雷了！");
} 

 <!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <title>强制在IE8模式下运行 by 司徒正美</title>  </head> <body > </body> </html> 

当我们尝试将innerHTML赋值给tr节点时，Firefox的解析机制会将其处理为：

司徒正美 <em>RestlessDream</em>

而预期的原始结构：

<td>司徒正美 </td><td><em>RestlessDream</em></td>

调整DOM顺序的解决方案

可以看到，td标签被意外去除了！起初怀疑这可能与元素加入DOM树的顺序有关，因此调整了代码执行顺序：

 
var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
newTable.appendChild(newTr);
var rowContent = '<td>司徒正美 </td><td><em>RestlessDream</em></td>';
newTr.innerHTML = rowContent;

 <!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <title>强制在IE8模式下运行 by 司徒正美</title>  </head> <body > </body> </html> 

通过上述顺序调整，成功解决了Firefox环境下的该问题！