jquery拼接html

本文轉載自查看原文 2016-09-20 20:42 3758 web

字符串拼接

關鍵代碼

       $(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>

瀏覽器效果圖：

瀏覽器查看源碼;

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery拼接HTML標簽元素 jQuery json遍歷渲染到頁面並且拼接html JQuery實現追加表格，不使用拼接html方式 jQuery 追加元素、拼接元素的方法總結（append、html、insertBefore、before等） jquery數組拼接 js 動態生成HTML 並設置title屬性，賦值變量 ; jquery屬性選擇器拼接變量 javascript拼接html代碼 javascript拼接html代碼給div拼接html 拼接字符串 jQuery 字符串拼接