字符串拼接
关键代码
$(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>
浏览器效果图：
浏览器查看源码;
