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

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

作者: 北冥有鱼我养的 | 来源:发表于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

相关文章

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

    先在body中添加一个ul标签,并添加类名test。 1.通过字符串拼接 曾经很长一段时间都是通过这种方法来插入数...

  • 探究InnoDB数据页内部行的存储方式

    探究InnoDB数据页内部行的存储方式 实验数据 之后delete id为3的行,并继续插入4行数据,最终: 分析...

  • 大连滕泰科技学习笔记2020-07-16

    1,项目组六 1,1 复习js数组对象数据插入和数据遍历问题-- 数据数据插入方案1:push方法-- 角标方式...

  • 数据库学习笔记——15 插入数据

    1 数据插入 顾名思义,INSERT用来将行插入(或添加)到数据库表。插入有几种方式: 插入完整的行; 插入行的一...

  • Mysql语法之插入数据

    一、数据插入 INSERT是用来插入(或添加)行到数据库表的。插入可以用几种方式使用: 插入完整的行; 插入行的一...

  • SQL—插入数据

    数据插入(INSERT) 顾名思义,INSERT用来将行插入(或添加)到数据库表。通常只能插入一行 插入有几种方式...

  • (5) 批量操作

    1.常用的批量插入的方式 下面的图表展示了mybatis几种方式的批量插入 2.批量插入的测试 初始化环境 for...

  • 1链表相关操作

    1.创建带头节点的链表,并且遍历输出。 题目 2.插入新链表,保持顺序,并遍历输出链表。 3.插入新的链表,并遍历...

  • VUE页面跳转及传参数

    一、进入页面加载数据 二、保存数据并跳转到列表页 三、table数据获取并传递到下个页面 插入数据序号自动递增,设...

  • 数据结构(三):二叉树遍历

    遍历方式 二叉树的常见遍历方式如下几种: 前序遍历: 访问根节点,前序遍历方式访问左子树,前序遍历方式访问右子树;...

网友评论

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

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