jQuery html()方法使用不了无法显示内容的问题

前端技术 2023/09/08 JavaScript
$(\"#content\").html(data.content); 
$(\"#content\")[0].innerHTML = data.content;

今天遇到jquery中的html方法使用不了,只能用完最基本的innerHTML把内容展示出来。具体原因还没找到,肯定跟内容有关,展示不了的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 href=\"http://newsletter.csdn.net/m/news/newsletter/index/13\" 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\" href=\"http://www.csdn.net/article/2014-07-28/2820881\" rel=\"external nofollow\" rel=\"external nofollow\" target=\"_blank\"> 
<span class=\"hot\">智能硬件生态未成,打造平台为时尚早?</span></a> 
</dt> 
<dd style=\"color: #666666; font-size: 13px; font-family: 宋体; line-height: 22px; margin: 0px;\"> 
当前的智能硬件产业发展是由创业公司探路,巨头纷纷跟进打造开放平台。但智能硬件市场至今无标杆性产品、开发者及应用前景不明、尚未找到用户“痛点”等特征表明市场仍处于萌芽阶段,打造平台为时尚早。<a href=\"http://www.csdn.net/article/2014-07-28/2820881\" 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\" href=\"http://download.csdn.net/detail/zhaifangqing/7604351\" rel=\"external nofollow\" rel=\"external nofollow\" target=\"_blank\"> 
<span class=\"hot\">【干货分享】2014深圳Maker Faire“创客与商业”论坛演讲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。在“创客与商业”论坛中,Atmel COO、点名时间CEO、电子新我CEO、Seeed创始人、HAXLR8R创始人、前富士康CEO等人,从Maker文化、众筹、孵化、创业、产品化等角度,分享了所观察、体会,并总结出的故事与经验。<a href=\"http://download.csdn.net/detail/zhaifangqing/7604351\" 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\" href=\"http://www.csdn.net/article/2014-07-16/2820690-10-best-AR-App\" rel=\"external nofollow\" rel=\"external nofollow\" target=\"_blank\"> 
<span class=\"hot\">增强现实:10大AR应用窥探移动未来</span></a> 
</dt> 
<dd style=\"color: #666666; font-size: 13px; font-family: 宋体; line-height: 22px; margin: 0px;\"> 
智能手机性能的提升,以及可穿戴设备,尤其是Google Glass的出现,让AR技术再次升温,也让我们在今年看到了不少基于AR技术开发的新应用。本文推荐10款优秀AR应用,其中有不少开发商还来自于传统行业。<a href=\"http://www.csdn.net/article/2014-07-16/2820690-10-best-AR-App\" 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\" href=\"http://www.csdn.net/article/2014-07-24/2820848-lenovo-3-hardware\" rel=\"external nofollow\" rel=\"external nofollow\" target=\"_blank\"> 
<span class=\"hot\">物联网多了把“新板凳” 联想推三款智能硬件</span></a> 
</dt> 
<dd style=\"color: #666666; font-size: 13px; font-family: 宋体; line-height: 22px; margin: 0px;\"> 
联想推出“中国最靠谱的互联网创业平台”――联想NBD(New BusinessDevelopment,昵称“新板凳”)。同时,发布了该平台“孵化”的首批三个创新产品:智能眼镜、智能空气净化器和智能路由器。<a href=\"http://www.csdn.net/article/2014-07-24/2820848-lenovo-3-hardware\" 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> 

<!-- 新锐产品 --> 
<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/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\" href=\"https://www.kickstarter.com/projects/1157856441/table-air?ref=category\" rel=\"external nofollow\" rel=\"external nofollow\" target=\"_blank\"> 
<span class=\"hot\">设计最优美的智能空气净化器 Table Air</span></a> 
</dt> 
<dd style=\"color: #666666; font-size: 13px; font-family: 宋体; line-height: 22px; margin-left: 0px;\"> 
这是一款来自深圳的空气净化器,允许用户通过手机进行控制。在每天早晨它会自动检测出空气质量。这款空气净化器的设计与众不同,不像传统的设备那样蠢笨,外观更加简洁。<a href=\"https://www.kickstarter.com/projects/1157856441/table-air?ref=category\" 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\" href=\"https://www.kickstarter.com/projects/261147844/airfy-beacon-imagination-meets-smart-home-automati?ref=category\" 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;\"> 
苹果在去年就发布了iBeacon,最初它给人们指出的产品方向更偏向于商业,例如在商场、店铺中使用,而这款airfy则是基于该技术的家居产品。它可以作为手机与NEST、IFTTT、hue智能灯等设备的中继站,不同的是,用户只需要走近airfy,就能触发一些功能,比如让灯光变亮、打开音响等。<a href=\"https://www.kickstarter.com/projects/261147844/airfy-beacon-imagination-meets-smart-home-automati?ref=category\" 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\" href=\"http://bong.cn/\" rel=\"external nofollow\" rel=\"external nofollow\" target=\"_blank\"> 
<span class=\"hot\">可续航一年的智能手环 Bong II</span></a> 
</dt> 
<dd style=\"color: #666666; font-size: 13px; font-family: 宋体; line-height: 22px; margin-left: 0px;\"> 
bong梅开二度,在上周发布了第二代手环,售价99元。不过最让人感到兴奋的不是价格,而是可以续航一年的持久力,这是目前可穿戴产品中不多见的。当然,除了续航,bong在功能上也做出了新的改进与创新。<a href=\"http://bong.cn/\" 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 href=\"http://club.csdn.net/module/club/cto/bbs/7468\" 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 href=\"http://club.csdn.net/module/club/cto/bbs/7468\" 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 href=\"http://club.csdn.net/module/club/cto/bbs/7464\" 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 href=\"http://club.csdn.net/module/club/cto/bbs/7474\" 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 href=\"http://newsletter.csdn.net/m/news/newsletter/index/13\" 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;\">关于智能硬件周刊</a></h3> 
<p style=\"line-height: 22px; font-size: 13px; margin: 5px 0 0 0;\">智能硬件周刊是CSDN推出的专辑周刊,萃取硬件领域多方资讯,展现与物联网相关的最新开发技术信息、热门硬件产品和硬件团队故事。更多精彩内容,欢迎访问<a href=\"http://hardware.csdn.net\" rel=\"external nofollow\" target=\"_blank\" style=\"text-decoration: underline;color: #c00;font-size: 13px;\">CSDN智能硬件技术社区</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\" href=\"http://huiyi.csdn.net/activity/product/goods_list?project_id=1203\" rel=\"external nofollow\" >【在线培训】HTML5移动应用开发:Cordova应用开发</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>关注了解最新活动信息</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 href=\"http://weibo.com/csdnmobile\" 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其他技术邮件:<br> 
<a href=\"http://newsletter.csdn.net/m/news/newsletter/index/1\" rel=\"external nofollow\" style=\"margin-right: 5px; color: rgb(204, 102, 0)\" target=\"_blank\"> 
<span style=\"text-decoration: underline;\">移动周刊</span></a>|<a href=\"http://newsletter.csdn.net/m/news/newsletter/index/12\" rel=\"external nofollow\" style=\"margin-right: 10px; color: rgb(204, 102, 0)\" target=\"_blank\"> 
<span style=\"text-decoration: underline;\">移动游戏周刊</span></a><a href=\"http://newsletter.csdn.net/m/news/newsletter/index/4\" rel=\"external nofollow\" style=\"margin-right: 5px; color: rgb(204, 102, 0)\" target=\"_blank\"> 
<br/><span style=\"text-decoration: underline;\">《程序员》速递</span></a>|<a href=\"http://newsletter.csdn.net/m/news/newsletter/index/2\" 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\" href=\"http://newsletter.csdn.net/m/news/newsletter/index/13\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" ><span style=\"text-decoration: underline\">智能硬件周刊往期回顾</span></a>,更多精彩内容尽在<a style=\"color: rgb(204, 102, 0)\" href=\"http://mobile.csdn.net/\" rel=\"external nofollow\" target=\"_blank\"><span style=\"text-decoration: underline;\">CSDN移动频道</span></a>。欢迎向您的朋友推荐<a style=\"color: rgb(204, 102, 0)\" href=\"http://mailfeed.csdn.net/es.ashx?cid=49&email=a@qq.com&op=w\" rel=\"external nofollow\" target=\"_blank\"><span style=\"text-decoration: underline;\">订阅</span></a>本邮列表。<br>如果不想再收到该邮件,可以<a style=\"color: rgb(204, 102, 0)\" href=\"http://mailfeed.csdn.net/es.ashx?cid=49&email=a@qq.com&op=b\" rel=\"external nofollow\" target=\"_blank\"><span style=\"text-decoration: underline;\">取消订阅</span></a></td> 
</tr> 
</tbody> 
</table> 
<div style=\"display:none;\"><script src=\"http://s20.cnzz.com/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.cnzz.com/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>

下面是其它网友的补充:

jQuery一般来说还是很好用的,但有时候它也会有些问题的,比如jQuery的html()方法设置html代码,在一种情况下,ie6、ie7、ie8 下是不能设置html代码的。本文说的问题只针对ie8(包括ie8)以下的浏览器。

  1.什么情况下IE6、IE7、IE8 jQuery.html(\"xxx\")方法会设置不上html代码?

  答:当被加载的的html代码里面出现以下情况,ie8(包括ie8)以下是设置不上html代码的:

    a) 被设置的html代码中包含引用其他js的,如:<script src=\"Stone.js\" type=\"text/javascript\"></script> 这种情况下,设置html代码无效。
    b) 被设置的html代码中包含js 方法的,如:function Stone(){ alert(\"我叫MT\"); },设置html代码无效。
    c) 被设置的html代码中有css 样式的,如:.Stone ul li{ list-style:none;float:left; }等,设置的html代码无效。[附加:被设置的html代码中如果包含引用其他外部

      样式的,比如:<link href=\"../Css/style.css\" rel=\"stylesheet\" type=\"text/css\" />,虽然不会影响html设置,但是被引用的css是无效的,是没有样式的。]

  2.原因分析:

  答:被设置的html,jQuery只是单纯的解析为html,不会去理会其他的因素和代码,所有导致上述问题的出现。

  3.解决方案:

  答:去掉被设置的js引用css引用和代码即可解决。

【Stone 制作整理,引用请写明出处谢谢合作,联系QQ:1370569】

本文地址:https://www.stayed.cn/item/21133

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。