美文网首页工作生活
遍历数据并插入页面的几种方式

遍历数据并插入页面的几种方式

作者: 北冥有鱼我养的 | 来源:发表于2019-06-29 23:35 被阅读0次

    先在body中添加一个ul标签,并添加类名test。

    // 构造100条数据
    var datas = [];
    for(var i = 1; i <=100; i++){
        datas.push('item' + i);
    }
    

    1.通过字符串拼接

    var resultHtml = '';
    for(var i = 0, len = datas.length; i < len; i++){
        resultHtml += '<li>' + datas[i] + '</li>';
    }
     $(".test").append(resultHtml);
    

    曾经很长一段时间都是通过这种方法来插入数据的,后来发现这种拼接方法效率比较低,不过是最简单可行的方法了。

    2.先把数据推入数组,最后通过join拼接。

    var arr = [];
    for (var i = 0; i < datas.length; i++) {
        arr.push('<li>'+datas[i]+'</li>');
    }
    $(".test").append(arr.join(''));
    

    3.通过标签元素连接数据

    var resultHtml = datas.join('</li><li>');
    $(".test").append('<li>'+resultHtml+'</li>');
    
    // 由于数据间的连接是</li><li>,所以要用'<li>'+resultHtml+'</li>'将数据包裹,这样才能将标签封闭。
    

    目前知道的就是这三种方法了。
    参考链接:https://zhidao.baidu.com/question/497466481281644484.html

    相关文章

      网友评论

        本文标题:遍历数据并插入页面的几种方式

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