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)文章
JVM是一種用于計(jì)算設(shè)備的規(guī)范，它是一個(gè)虛構(gòu)出來(lái)的機(jī)器，是通過(guò)在實(shí)際的計(jì)算機(jī)上仿真模擬各種功能實(shí)現(xiàn)的。JVM的內(nèi)存區(qū)域可以被分為：線程、棧、堆、靜態(tài)方法區(qū)。本文將介紹JVM的內(nèi)存模型，感興趣的小伙伴，可以參考下2021-06-06
JS實(shí)現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實(shí)現(xiàn)控制圖片顯示大小的方法,即實(shí)現(xiàn)圖片等比例縮放功能,涉及JS動(dòng)態(tài)操作頁(yè)面元素屬性相關(guān)技巧,需要的朋友可以參考下2017-02-02
javascript多行字符串的簡(jiǎn)單實(shí)現(xiàn)方式
之前我們給大家講訴過(guò)javascript多行字符串的7種解決辦法，今天來(lái)給大家分享一個(gè)更簡(jiǎn)單的方法，非常的實(shí)用，大家一定要仔細(xì)看看哦。2015-05-05
List Installed Hot Fixes...2007-06-06
JavaScript模塊規(guī)范之AMD規(guī)范和CMD規(guī)范
本篇文章給大家介紹js模塊規(guī)范之AMD規(guī)范和CMD規(guī)范，模塊化是一種處理復(fù)雜系統(tǒng)分解為代碼結(jié)構(gòu)更合理，可維護(hù)性更高的可管理的模塊的方式，對(duì)js amd cmd規(guī)范感興趣的童鞋可以來(lái)本文學(xué)習(xí)2015-10-10
這篇文章主要介紹了JavaScript表格常用操作方法,實(shí)例匯總了javascript中表格操作的創(chuàng)建、添加、刪除、遍歷等常用操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】
KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。通過(guò)本文給大家介紹BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
js實(shí)現(xiàn)背景圖自適應(yīng)窗口大小
本文分享了背景圖自適應(yīng)窗口大小的實(shí)例代碼，具有一定的參考作用。下面跟著小編一起來(lái)看下吧2017-01-01
js實(shí)現(xiàn)完全自定義可帶多級(jí)目錄的網(wǎng)頁(yè)鼠標(biāo)右鍵菜單方法
這篇文章主要介紹了js實(shí)現(xiàn)完全自定義可帶多級(jí)目錄的網(wǎng)頁(yè)鼠標(biāo)右鍵菜單方法,實(shí)例分析了javascript實(shí)現(xiàn)自定義網(wǎng)頁(yè)鼠標(biāo)右鍵彈出菜單的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10