小心inneHTML的地雷
大家都喜欢用innerHTML添加内容，但是innerHTML这东西在两大阵营中有许多不同。回顾一下，IE会把标签内前面的一些空白kill掉，还会把它里面标签统统大写，会显示动态添加的属性，在某些元素中，它还是只读的。这个由IE发明的东西，最后被爆如此多缺陷，真是令人心寒。不过innerHTML还有一地雷，存在于最标准的火狐中，看下面代码：
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("你踩雷了！");} |
当我们把innerHTML加入到tr节点时，它会被firefox解析成:
司徒正美 <em>RestlessDream</em> |
而不再是原来的:
<td>司徒正美 </td><td><em>RestlessDream</em></td> |
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; |
这样就解决了firefox的情况！
如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库