javascript inneHTML的地雷

2019-11-21 00:44:04

字體：大中小

來源：轉載

供稿：網友

回顧一下，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("你踩雷了！"); 
} 

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

當我們把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; 

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

這樣就解決了firefox的情況！

上一篇：javascript 定義新對象方法

下一篇：javascript 包裹節點提高效率