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

先在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

posted @ 2018-08-13 15:36  chillylight  阅读(864)  评论(0编辑  收藏  举报