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>

 

瀏覽器效果圖:

瀏覽器查看源碼;

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM