字符串拼接
关键代码
$(function () {
var htmlText='';
$.each(json,function(i, item){
htmlText += '<div class="carea">' + '<h2>' + item.description + '</h2>';
htmlText += '<ul class="carea-list">';
$.each(item.articleInfors,function(j,ele){
htmlText += '<li><a href="/subject/ '+ ele.id + '/">'+ ele.title + '</a></li>';
});
htmlText += '</ul>' + '</div>';
});
$(".headline").after(htmlText);
});
或者:
$(function () {
var htmlText='';
$.each(json,function(i, item){
htmlText +="<div class='carea'>";
htmlText +="<h2>"+item.description+"</h2><ul class='carea-list'>";
$.each(item.articleInfors,function(j,ele){
htmlText +="<li><a href='/subject/"+ele.id+"/'>"+ele.title+"</a></li>";
});
htmlText+="</ul></div>";
});
$(".headline").after(htmlText);
});
拼接结果:
<div class="carea">
<h2>散文</h2>
<ul class="carea-list">
<li><a href="/subject/1/">周作人:初恋</a></li>
<li><a href="/subject/2/">心深处,念你如初如昔</a></li>
<li><a href="/subject/3/">又是中秋月圆时</a></li>
</ul>
</div>
<div class="carea">
<h2>诗歌</h2>
<ul class="carea-list">
<li><a href="/subject/4/">阳关曲·中秋月</a></li>
<li><a href="/subject/5/">九日齐山登高</a></li>
<li><a href="/subject/6/">水调歌头</a></li>
</ul>
</div>
注解:
append() 方法在被选元素的结尾(仍然在内部)插入指定内容;
html() 方法返回或设置被选元素的内容 (inner HTML);
after() 方法在被选元素后插入指定的内容。
如果该方法未设置参数,则返回被选元素的当前内容。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拼接html</title>
<link href="http://i0.sanwen8.cn/style/category.css" rel="stylesheet" type="text/css"/>
<style>
</style>
<!--自己添加-->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
var json = [ {
"id" : 1,
"description" : "散文",
"articleInfors" : [ {
"id" : 1,
"title" : "周作人:初恋"
}, {
"id" : 2,
"title" : "心深处,念你如初如昔"
}, {
"id" : 3,
"title" : "又是中秋月圆时"
} ]
}, {
"id" : 2,
"description" : "诗歌",
"articleInfors" : [ {
"id" : 4,
"title" : "阳关曲·中秋月"
}, {
"id" : 5,
"title" : "九日齐山登高"
}, {
"id" : 6,
"title" : "水调歌头"
} ]
} ];
$(function () {
var htmlText='';
$.each(json,function(i, item){
htmlText += '<div class="carea">' + '<h2>' + item.description + '</h2>';
htmlText += '<ul class="carea-list">';
$.each(item.articleInfors,function(j,ele){
htmlText += '<li><a href="/subject/ '+ ele.id + '/">'+ ele.title + '</a></li>';
});
htmlText += '</ul>' + '</div>';
});
$(".headline").after(htmlText);
});
</script>
</head>
<body style="color:#00FF00">
<div class="headline"><hr></div>
</body>
</html>
浏览器效果图:
浏览器查看源码;