javascript inneHTML的地雷
更新時(shí)間：2010年02月20日 10:48:27 作者：
大家都喜歡用innerHTML添加內(nèi)容，但是innerHTML這東西在兩大陣營(yíng)中有許多不同。
回顧一下，IE會(huì)把標(biāo)簽內(nèi)前面的一些空白kill掉，還會(huì)把它里面標(biāo)簽統(tǒng)統(tǒng)大寫(xiě)，會(huì)顯示動(dòng)態(tài)添加的屬性，在某些元素中，它還是只讀的。這個(gè)由IE發(fā)明的東西，最后被爆如此多缺陷，真是令人心寒。不過(guò)innerHTML還有一地雷，存在于最標(biāo)準(zhǔn)的火狐中，看下面代碼：
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需再刷新一下頁(yè)面才能執(zhí)行]
當(dāng)我們把innerHTML加入到tr節(jié)點(diǎn)時(shí)，它會(huì)被firefox解析成:
而不再是原來(lái)的:
td標(biāo)簽被去掉了！我想是不是與加入DOM樹(shù)的順序有關(guān)，調(diào)整一下：
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需再刷新一下頁(yè)面才能執(zhí)行]
這樣就解決了firefox的情況！
復(fù)制代碼 代碼如下:
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需再刷新一下頁(yè)面才能執(zhí)行]
當(dāng)我們把innerHTML加入到tr節(jié)點(diǎn)時(shí)，它會(huì)被firefox解析成:
復(fù)制代碼 代碼如下:
司徒正美 <em>RestlessDream</em>
而不再是原來(lái)的:
復(fù)制代碼 代碼如下:
<td>司徒正美 </td><td><em>RestlessDream</em></td>
td標(biāo)簽被去掉了！我想是不是與加入DOM樹(shù)的順序有關(guān)，調(diào)整一下：
復(fù)制代碼 代碼如下:
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需再刷新一下頁(yè)面才能執(zhí)行]
這樣就解決了firefox的情況！
相關(guān)文章
js 鏈?zhǔn)窖舆t執(zhí)行DOME，需要的朋友可以參考下。2012-01-01
js獲取瀏覽器的可視區(qū)域尺寸的實(shí)現(xiàn)代碼
js獲取瀏覽器的可視區(qū)域尺寸的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-11-11
手淘flexible.js框架使用和源代碼講解小結(jié)
手淘框架是一個(gè)用來(lái)適配移動(dòng)端的js框架，這篇文章主要介紹了手淘flexible.js框架使用和源代碼講解小結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
理解與使用JavaScript中的回調(diào)函數(shù)
這篇文章主要介紹了JavaScript中的回調(diào)函數(shù)，想詳細(xì)了解回調(diào)函數(shù)的同學(xué)，一定要看一下2021-04-04
js匿名函數(shù)的調(diào)用示例(形式多種多樣)
匿名函數(shù)就是沒(méi)有實(shí)際名字的函數(shù)，javaScript的匿名函數(shù)形式多樣，下面就一一為大家羅列出來(lái)2014-08-08
這篇文章主要為大家詳細(xì)介紹了js遮罩效果制作彈出注冊(cè)界面效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)輪播圖，播放上一張，下一張，可選取第幾張等效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS無(wú)縫滾動(dòng)效果實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS無(wú)縫滾動(dòng)效果實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了無(wú)縫滾動(dòng)的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
javascript中json基礎(chǔ)知識(shí)詳解
本文主要介紹了json的基礎(chǔ)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
在javascript前端開(kāi)發(fā)中js函數(shù)問(wèn)題經(jīng)常會(huì)被討論，這個(gè)問(wèn)題仁者見(jiàn)仁智者見(jiàn)智，下面通過(guò)示例代碼給大家介紹js五大常見(jiàn)函數(shù)，感興趣的朋友一起看看吧2018-03-03