javascript inneHTML的地雷

2024-05-06 14:11:29

字體：大中小

來源：轉載

供稿：網友

回顧一下，IE會把標簽內前面的一些空白kill掉，還會把它里面標簽統統大寫，會顯示動態添加的屬性，在某些元素中，它還是只讀的。這個由IE發明的東西，最后被爆如此多缺陷，真是令人心寒。不過innerHTML還有一地雷，存在于最標準的火狐中，看下面代碼：
代碼如下:
var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
var rowContent = '<td>司徒正美 </td><td>RestlessDream</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解析成:
代碼如下:司徒正美 RestlessDream
而不再是原來的:
代碼如下:<td>司徒正美 </td><td>RestlessDream</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>RestlessDream</td>';
newTr.innerHTML = rowContent;

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
這樣就解決了firefox的情況！

上一篇：JavaScript DOM 學習第三章內容表格

下一篇：Extjs學習過程中新手容易碰到的低級錯誤積累