innerHTML在Firefox中的解析陷阱：tr节点td标签丢失问题
本文探讨innerHTML在Firefox浏览器中的特殊行为。当HTML字符串直接赋值给tr节点的innerHTML时，Firefox会错误地移除td标签并仅保留文本内容。通过调整DOM树构建顺序，先创建并追加tr到table，再设置innerHTML，可避免此解析错误。
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> [[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]]
当我们尝试将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> [[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]]
通过上述顺序调整，成功解决了Firefox环境下的该问题！
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19