jquery拼接html

字符串拼接

关键代码

       $(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/">阳关曲&middot;中秋月</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>

浏览器效果图：

浏览器查看源码;

相关阅读:
[转]Linux中用编译的Zlib库替换系统自带的
 [转]Leptonica在VS2010中的编译及简单使用举例
 我的tesseract学习记录
 [转]在VS2010下编译和使用tesseract_ocr
[转]图像resize
JVM基础知识（摘抄整理）
JVM运行时数据内存区和指令集（摘抄整理）
JMM For Object Size（摘抄整理）
JMM课程小结（摘抄整理）
Class的加载过程
原文地址：https://www.cnblogs.com/xiaobijia/p/5890298.html