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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,770评论 1 45
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,621评论 1 32
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,090评论 1 92
  • width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵胜奥阅读 5,133评论 0 1
  • 10月底,听说樊登老师过来厦门举办千人演讲会,心里有些小激动,就定了演讲会的票,还拉上了我妹和晓燕一起买...
    灿珍阅读 2,582评论 2 7

友情链接更多精彩内容