用js拼接html后css样式失效
jquery时间轴数据用js拼接成html之后,样式失效,
$(function(){
var param=location.search;
param=param.substring(1,param.length);
console.log(param);
$.ajax({
type:"get",
url:"qingbaoAction_timeLine.action",
dataType:"json",
data:param+"&mt=5",
success:function(details){
console.log(details);
$.each(details,function(i,n){
if(n.publishedTime!=null){
$('#dates4').append('<li><a href=\"#t4'+i+'\">'+(n.publishedTime.substring(0,10)).replace(/-/gm,'.')+'</a></li>'+'\n');
$('#issues4').append('<li id=\"t4'+i+'\"><h2>'+n.media_name+'</h2><p><a href='+n.url+' target=\"_blank\">'+n.title+'</a></p></li>'+'\n');
}
});
console.log($("#dates4").html());
console.log($("#issues4").html());
}
});
});
拼接出来的结果和原来html里的数据格式完全一样,
原来的是这样:
<ul id="dates4">
<li><a href="#t41">2005.7.24 12:18</a></li>
<li><a href="#t42">2005.7.24 12:18</a></li>
<li><a href="#t43">2005.7.24 12:18</a></li>
</ul>
<ul id="issues4">
<li id="t41">
<h2>2005 闪亮登场</h2>
<p>2005年,呱呱坠地。界面清爽、功能俱全、操作简单易上手,是大家都喜爱的网络家园。出生不久,就有越来越多的朋友到我这里分享自己的生活。</p>
</li>
<li id="t42">
<h2>2006 扬帆起航</h2>
<p>2006年,咿呀学语。面对每天千万级的用户访问,技术GG帮我优化了架构,设计师MM帮我设计了欢迎动画等个性化装扮,“妈妈再也不担心我404了”!</p>
</li>
<li id="t43">
<h2>2007 内外兼修</h2>
<p>2007年,初长成。咱推出了信息中心和好友圈,开始向SNS社区转型;首创4.0全屏模式,更加美观大方。</p>
</li>
</ul>