jQuery html()方法使用不了無法顯示內(nèi)容的問題

更新時間：2014年08月06日 11:33:43 投稿：whsnow

jquery中的html方法使用不了，只能用完最基本的innerHTML把內(nèi)容展示出來

$("#content").html(data.content); 
$("#content")[0].innerHTML = data.content;

今天遇到j(luò)query中的html方法使用不了，只能用完最基本的innerHTML把內(nèi)容展示出來。具體原因還沒找到，肯定跟內(nèi)容有關(guān)，展示不了的html放上來供以后檢查原因，是我收到csdn的一封郵件。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

<title>智能硬件周刊 - 第4期</title> 
<style type="text/css"> 
a:link { 
color: #333; 
text-decoration: none; 
} 

a:hover { 
color: #c00; 
} 

span.hot { 
font-weight: bold; 
} 

.button * { 
vertical-align: middle; 
} 
</style></head> 

<body> 
<div> 
<table align="center" border="0" cellpadding="0" cellspacing="0" width="760"> 
<tbody> 
<tr> 
<td width="540"><a  rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img style="cursor: pointer;border: 0px;" alt="" src="http://cms.csdnimg.cn/article/201406/12/539917aecc84c.jpg"></a></td> 
<td width="30"></td> 
<td width="190" style="font-size: 12px; font-family: Microsoft Yahei; line-height: 40px; padding-right: 3px" align="right">2014-07-29 第 
<span style="color: #c00; text-decoration: none;">4</span>期</td> 
</tr> 
<tr> 
<td colspan="3" bgcolor="#cc0000" height="5"></td> 
</tr> 
<tr> 
<td width="540" valign="top"> 
<!-- 資訊速遞 --> 
<h1 style="font-family: Microsoft Yahei; font-size: 20px; margin: 20px 0 0 0; font-weight: normal; border-bottom: solid 1px #d1d1d1; color: #c00; padding-bottom: 5px"><img style="margin-right: 5px" alt="" src="http://articles.csdn.net/uploads/allimg/120413/118_120413113016_1.gif">資訊速遞 
</h1> 
<dl style="padding: 6 0 0 0;margin:0px;clear: both;"> 
<!-- 判斷圖片是否存在 --> 
<img src="http://newsletter.csdn.net/uploadfile/logoimg/image/20140729/20140729111725_67948_logo.jpg" border="0" style="float:left;padding: 15px 10px 15px 0;width: 160px;height: 110px;"> 
<dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"> 
<a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none"  rel="external nofollow" rel="external nofollow" target="_blank"> 
<span class="hot">智能硬件生態(tài)未成，打造平臺為時尚早？</span></a> 
</dt> 
<dd style="color: #666666; font-size: 13px; font-family: 宋體; line-height: 22px; margin: 0px;"> 
當(dāng)前的智能硬件產(chǎn)業(yè)發(fā)展是由創(chuàng)業(yè)公司探路，巨頭紛紛跟進打造開放平臺。但智能硬件市場至今無標桿性產(chǎn)品、開發(fā)者及應(yīng)用前景不明、尚未找到用戶“痛點”等特征表明市場仍處于萌芽階段，打造平臺為時尚早。<a  rel="external nofollow" rel="external nofollow" target="_blank" style="color: #c00; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;padding-bottom:20px;">[閱讀原文] </a> 
</dd> 
</dl> 
<dl style="padding: 6 0 0 0;margin:0px;clear: both;"> 
<!-- 判斷圖片是否存在 --> 
<dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"> 
<a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none"  rel="external nofollow" rel="external nofollow" target="_blank"> 
<span class="hot">【干貨分享】2014深圳Maker Faire“創(chuàng)客與商業(yè)”論壇演講PDF</span></a> 
</dt> 
<dd style="color: #666666; font-size: 13px; font-family: 宋體; line-height: 22px; margin: 0px;"> 
2014年4月6日至7日，深圳舉辦Featured級別Maker Faire。在“創(chuàng)客與商業(yè)”論壇中，Atmel COO、點名時間CEO、電子新我CEO、Seeed創(chuàng)始人、HAXLR8R創(chuàng)始人、前富士康CEO等人，從Maker文化、眾籌、孵化、創(chuàng)業(yè)、產(chǎn)品化等角度，分享了所觀察、體會，并總結(jié)出的故事與經(jīng)驗。<a  rel="external nofollow" rel="external nofollow" target="_blank" style="color: #c00; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;padding-bottom:20px;">[閱讀原文] </a> 
</dd> 
</dl> 
<dl style="padding: 6 0 0 0;margin:0px;clear: both;"> 
<!-- 判斷圖片是否存在 --> 
<dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"> 
<a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none"  rel="external nofollow" rel="external nofollow" target="_blank"> 
<span class="hot">增強現(xiàn)實：10大AR應(yīng)用窺探移動未來</span></a> 
</dt> 
<dd style="color: #666666; font-size: 13px; font-family: 宋體; line-height: 22px; margin: 0px;"> 
智能手機性能的提升，以及可穿戴設(shè)備，尤其是Google Glass的出現(xiàn)，讓AR技術(shù)再次升溫，也讓我們在今年看到了不少基于AR技術(shù)開發(fā)的新應(yīng)用。本文推薦10款優(yōu)秀AR應(yīng)用，其中有不少開發(fā)商還來自于傳統(tǒng)行業(yè)。<a  rel="external nofollow" rel="external nofollow" target="_blank" style="color: #c00; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;padding-bottom:20px;">[閱讀原文] </a> 
</dd> 
</dl> 
<dl style="padding: 6 0 0 0;margin:0px;clear: both;"> 
<!-- 判斷圖片是否存在 --> 
<dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"> 
<a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none"  rel="external nofollow" rel="external nofollow" target="_blank"> 
<span class="hot">物聯(lián)網(wǎng)多了把“新板凳” 聯(lián)想推三款智能硬件</span></a> 
</dt> 
<dd style="color: #666666; font-size: 13px; font-family: 宋體; line-height: 22px; margin: 0px;"> 
聯(lián)想推出“中國最靠譜的互聯(lián)網(wǎng)創(chuàng)業(yè)平臺”――聯(lián)想NBD(New BusinessDevelopment，昵稱“新板凳”)。同時，發(fā)布了該平臺“孵化”的首批三個創(chuàng)新產(chǎn)品：智能眼鏡、智能空氣凈化器和智能路由器。<a  rel="external nofollow" rel="external nofollow" target="_blank" style="color: #c00; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;padding-bottom:20px;">[閱讀原文] </a> 
</dd> 
</dl> 

<!-- 新銳產(chǎn)品 --> 
<h1 style="font-family: Microsoft Yahei; font-size: 20px; margin: 20px 0 0 0; font-weight: normal; border-bottom: solid 1px #d1d1d1; color: #c00; padding-bottom: 5px"><img style="margin-right: 5px" alt="" src="http://articles.csdn.net/uploads/allimg/120413/118_120413113016_1.gif">新銳產(chǎn)品 
</h1> 
<dl style="padding: 6 0 0 0;margin:0px;clear: both;"> 
<!-- 判斷圖片是否存在 --> 
<img src="http://newsletter.csdn.net/uploadfile/logoimg/image/20140729/20140729103841_55898_logo.jpg" border="0" style="float:left;padding: 15px 10px 15px 0;width: 160px;height: 110px;"> 
<dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"> 
<a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none"  rel="external nofollow" rel="external nofollow" target="_blank"> 
<span class="hot">設(shè)計最優(yōu)美的智能空氣凈化器 Table Air</span></a> 
</dt> 
<dd style="color: #666666; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;"> 
這是一款來自深圳的空氣凈化器，允許用戶通過手機進行控制。在每天早晨它會自動檢測出空氣質(zhì)量。這款空氣凈化器的設(shè)計與眾不同，不像傳統(tǒng)的設(shè)備那樣蠢笨，外觀更加簡潔。<a  rel="external nofollow" rel="external nofollow" target="_blank" style="color: #c00; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;padding-bottom:20px;">[閱讀原文] </a> 
</dd> 
</dl> 
<dl style="padding: 6 0 0 0;margin:0px;clear: both;"> 
<!-- 判斷圖片是否存在 --> 
<img src="http://newsletter.csdn.net/uploadfile/logoimg/image/20140729/20140729102357_10579_logo.jpg" border="0" style="float:left;padding: 15px 10px 15px 0;width: 160px;height: 110px;"> 
<dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"> 
<a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none"  rel="external nofollow" rel="external nofollow" target="_blank"> 
<span class="hot">基于iBeacon的智能家居中心 airfy Beacon</span></a> 
</dt> 
<dd style="color: #666666; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;"> 
蘋果在去年就發(fā)布了iBeacon，最初它給人們指出的產(chǎn)品方向更偏向于商業(yè)，例如在商場、店鋪中使用，而這款airfy則是基于該技術(shù)的家居產(chǎn)品。它可以作為手機與NEST、IFTTT、hue智能燈等設(shè)備的中繼站，不同的是，用戶只需要走近airfy，就能觸發(fā)一些功能，比如讓燈光變亮、打開音響等。<a  rel="external nofollow" rel="external nofollow" target="_blank" style="color: #c00; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;padding-bottom:20px;">[閱讀原文] </a> 
</dd> 
</dl> 
<dl style="padding: 6 0 0 0;margin:0px;clear: both;"> 
<!-- 判斷圖片是否存在 --> 
<img src="http://newsletter.csdn.net/uploadfile/logoimg/image/20140729/20140729101200_43505_logo.jpg" border="0" style="float:left;padding: 15px 10px 15px 0;width: 160px;height: 110px;"> 
<dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"> 
<a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none"  rel="external nofollow" rel="external nofollow" target="_blank"> 
<span class="hot">可續(xù)航一年的智能手環(huán) Bong II</span></a> 
</dt> 
<dd style="color: #666666; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;"> 
bong梅開二度，在上周發(fā)布了第二代手環(huán)，售價99元。不過最讓人感到興奮的不是價格，而是可以續(xù)航一年的持久力，這是目前可穿戴產(chǎn)品中不多見的。當(dāng)然，除了續(xù)航，bong在功能上也做出了新的改進與創(chuàng)新。<a  rel="external nofollow" rel="external nofollow" target="_blank" style="color: #c00; font-size: 13px; font-family: 宋體; line-height: 22px; margin-left: 0px;padding-bottom:20px;">[閱讀原文] </a> 
</dd> 
</dl> 

<!--dl style="clear: both;"> 
<dt style="color: #333; font-size: 14px; font-family: Microsoft Yahei; margin-top: 5px; line-height: 22px"> 
<img style="margin-right: 10px" alt="" src="http://articles.csdn.net/uploads/allimg/120416/118_120416163515_1.png"> 
<a  rel="external nofollow" rel="external nofollow" style="text-align: left; color: #333; font-size: 14px; text-decoration: none" target="_blank">被微軟正版部門盯上被微軟正版部門盯上......</a> 
</dt> 
<dt style="color: #333; font-size: 14px; font-family: Microsoft Yahei; margin-top: 5px; line-height: 22px"> 
<img style="margin-right: 10px" alt="" src="http://articles.csdn.net/uploads/allimg/120416/118_120416163515_1.png"> 
<a  rel="external nofollow" rel="external nofollow" style="text-align: left; color: #333; font-size: 14px; text-decoration: none" target="_blank">被微軟正版部門盯上......</a> 
</dt> 
<dt style="color: #333; font-size: 14px; font-family: Microsoft Yahei; margin-top: 5px; line-height: 22px"> 
<img style="margin-right: 10px" alt="" src="http://articles.csdn.net/uploads/allimg/120416/118_120416163515_1.png"> 
<a  rel="external nofollow" style="text-align: left; color: #333; font-size: 14px; text-decoration: none" target="_blank">迷失方向，請各位朋友、前輩指導(dǎo)下</a> 
</dt> 
<dt style="color: #333; font-size: 14px; font-family: Microsoft Yahei; margin-top: 5px; line-height: 22px"> 
<img style="margin-right: 10px" alt="" src="http://articles.csdn.net/uploads/allimg/120416/118_120416163515_1.png"> 
<a  rel="external nofollow" style="text-align: left; color: #333; font-size: 14px; text-decoration: none" target="_blank">《程序員》雜志邀請您參與管理話題討論，分享您的觀點</a> 
</dt> 
</dl--> 
</td> 
<td width="30"></td> 
<td width="190" valign="top"> 
<h3 style="margin: 20px 0 0 0; font-family: Microsoft Yahei;color: #c00; font-size: 16px; font-weight: normal; text-decoration: none;padding-bottom: 5px;"><a  rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" style="margin: 20px 0 0 0; font-family: Microsoft Yahei;color: #c00; font-size: 16px; font-weight: normal; text-decoration: none;">關(guān)于智能硬件周刊</a></h3> 
<p style="line-height: 22px; font-size: 13px; margin: 5px 0 0 0;">智能硬件周刊是CSDN推出的專輯周刊，萃取硬件領(lǐng)域多方資訊，展現(xiàn)與物聯(lián)網(wǎng)相關(guān)的最新開發(fā)技術(shù)信息、熱門硬件產(chǎn)品和硬件團隊故事。更多精彩內(nèi)容，歡迎訪問<a  rel="external nofollow" target="_blank" style="text-decoration: underline;color: #c00;font-size: 13px;">CSDN智能硬件技術(shù)社區(qū)</a>。</p> 
<!-- 近期活動 --> 

<h3 style="margin: 20px 0 0 0; font-family: Microsoft Yahei;color: #c00; font-size: 16px; font-weight: normal; text-decoration: none;padding-bottom: 5px;">近期活動</h3> 
<p style="line-height: 22px; font-size: 13px; margin: 5px 0 0 0;"><a style="color:#333; font-size:13px;text-decoration: underline;font-family: Microsoft Yahei;" target="_blank"  rel="external nofollow" >【在線培訓(xùn)】HTML5移動應(yīng)用開發(fā)：Cordova應(yīng)用開發(fā)</a><br> 
<span style="font-size: 12px; line-height: 22px; margin-bottom: 20px; color: #999"></span> </p> 
<!-- 微信 --> 
<h3 style="margin: 20px 0 0 0; font-family: Microsoft Yahei;color: #c00; font-size: 16px; font-weight: normal; text-decoration: none;padding-bottom: 5px;">mobilehub微信</h3> 
<p style="font-size: 12px; text-align:center; font-family: Microsoft Yahei; line-height: 18px; margin-bottom: 15px; color: #999;border: 1px solid #eee;"><img alt="" style="width: 190px; height: 190px; " src="http://cms.csdnimg.cn/article/201406/11/5397f8771d247.jpg"> 
<br>關(guān)注了解最新活動信息</p> 
<h3 style="margin: 20px 0 0 0; font-family: Microsoft Yahei;color: #c00; font-size: 16px; font-weight: normal; text-decoration: none;padding-bottom: 5px;">微博：<a  rel="external nofollow" target="_blank" style="margin: 20px 0 0 0; font-family: Microsoft Yahei;color: #c00; font-size: 16px; font-weight: normal; text-decoration: none;">@csdnmobile</a></h3> 

<p style="font-size: 12px; font-family: Microsoft Yahei; line-height: 22px; margin-bottom: 20px; color: #999">歡迎訂閱CSDN其他技術(shù)郵件：<br> 
<a  rel="external nofollow" style="margin-right: 5px; color: rgb(204, 102, 0)" target="_blank"> 
<span style="text-decoration: underline;">移動周刊</span></a>|<a  rel="external nofollow" style="margin-right: 10px; color: rgb(204, 102, 0)" target="_blank"> 
<span style="text-decoration: underline;">移動游戲周刊</span></a><a  rel="external nofollow" style="margin-right: 5px; color: rgb(204, 102, 0)" target="_blank"> 
<br/><span style="text-decoration: underline;">《程序員》速遞</span></a>|<a  rel="external nofollow" style="margin-left: 5px; color: rgb(204, 102, 0)" target="_blank"> 
<span style="text-decoration: underline;">云周刊</span></a></p> 
</td> 
</tr> 
<tr> 
<td colspan="2" height="10"></td> 
</tr> 
<tr> 
<td colspan="3" align="center" bgcolor="#ebebeb" style="font-size: 12px; line-height: 20px; padding: 10px 15px; color: rgb(102, 102, 102)"> 
查看<a style="color: rgb(204, 102, 0)" target="_blank"  rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span style="text-decoration: underline">智能硬件周刊往期回顧</span></a>，更多精彩內(nèi)容盡在<a style="color: rgb(204, 102, 0)"  rel="external nofollow" target="_blank"><span style="text-decoration: underline;">CSDN移動頻道</span></a>。歡迎向您的朋友推薦<a style="color: rgb(204, 102, 0)"  rel="external nofollow" target="_blank"><span style="text-decoration: underline;">訂閱</span></a>本郵列表。<br>如果不想再收到該郵件，可以<a style="color: rgb(204, 102, 0)"  rel="external nofollow" target="_blank"><span style="text-decoration: underline;">取消訂閱</span></a></td> 
</tr> 
</tbody> 
</table> 
<div style="display:none;"><script src="http://s20.#/stat.php?id=5217866&web_id=5217866" language="JavaScript"></script></div> 
</div> 
<img src="http://tracker.csdn.net/edmtracker.aspx?e=%25EMAIL%25&m=3060" width="1" height="1"> 
<div style="display:none;"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5752922'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s17.#/stat.php%3Fid%3D5752922%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script></div></body> 
</html> 
<img src="http://tracker.csdn.net/edmtracker.aspx?e=a@qq.com&m=4459" width=1 height=1>

下面是其它網(wǎng)友的補充：

jQuery一般來說還是很好用的，但有時候它也會有些問題的，比如jQuery的html()方法設(shè)置html代碼，在一種情況下，ie6、ie7、ie8 下是不能設(shè)置html代碼的。本文說的問題只針對ie8（包括ie8）以下的瀏覽器。

　　1.什么情況下IE6、IE7、IE8 jQuery.html("xxx")方法會設(shè)置不上html代碼？

　　答：當(dāng)被加載的的html代碼里面出現(xiàn)以下情況，ie8（包括ie8）以下是設(shè)置不上html代碼的：

　　　　a) 被設(shè)置的html代碼中包含引用其他js的，如：<script src="Stone.js" type="text/javascript"></script> 這種情況下，設(shè)置html代碼無效。
　　　　b) 被設(shè)置的html代碼中包含js 方法的，如：function Stone(){ alert("我叫MT"); }，設(shè)置html代碼無效。
　　　　c) 被設(shè)置的html代碼中有css 樣式的，如：.Stone ul li{ list-style:none;float:left; }等，設(shè)置的html代碼無效。[附加：被設(shè)置的html代碼中如果包含引用其他外部

　　　　　樣式的，比如：<link href="../Css/style.css" rel="stylesheet" type="text/css" />，雖然不會影響html設(shè)置，但是被引用的css是無效的，是沒有樣式的。]

　　2.原因分析：

　　答：被設(shè)置的html，jQuery只是單純的解析為html，不會去理會其他的因素和代碼，所有導(dǎo)致上述問題的出現(xiàn)。

　　3.解決方案：

　　答：去掉被設(shè)置的js引用css引用和代碼即可解決。

【Stone 制作整理，引用請寫明出處謝謝合作，聯(lián)系QQ：1370569】

您可能感興趣的文章: