美文网首页js
js之ajax追加数据到html--demo

js之ajax追加数据到html--demo

作者: world_7735 | 来源:发表于2018-11-26 18:50 被阅读211次

    方式一

    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva Rect Demo</title>
    </head>
    <body>
    <div>
        <ul class="con">
            
        </ul>
          <ul id="user" style="display:none;">
              <li><span>hhh</span><span>hhh1</span></li>
          </ul>
    </div>   
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    var jsons=[{name:'uuu1',age:23},{name:'uuu2',age:22},{name:'uuu3',age:25}];
    for(var i=0,user;user=jsons[i++];){
        console.log(user);
        $("#user li span:first").text(user.name);
        $("#user li span:last").text(user.age);
        $(".con").append($("#user").html());
    }
    
    </script>
    </body>
    </html>
    

    方式二

    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva Rect Demo</title>
    </head>
    <body>
    <div>
        <ul class="con">
            
        </ul>
          
    </div>   
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    var jsons=[{name:'uuu1',age:23},{name:'uuu2',age:22},{name:'uuu3',age:25}];
    var content='';
    for(var i=0,user;user=jsons[i++];){
        content+=`<li><span>${user.name}</span><span>${user.age}</span></li>`
        
    }
    $(".con").append(content);
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:js之ajax追加数据到html--demo

        本文链接:https://www.haomeiwen.com/subject/qdtbqqtx.html