字符串拼接
關鍵代碼
$(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>
瀏覽器效果圖:
瀏覽器查看源碼;