(二)小案例银行家应用程序-创建DOM元素

在这里插入图片描述

● 上图的数据很明显是从我们账户数组中拿到了,我们刚刚学习了forEach,所以我们使用forEach来创建我们的DOM元素;

const displayMovements = function (movements) {
  movements.forEach((mov, i) => {
    const type = mov > 0 ? 'deposit' : 'withdrawal';

    const html = `
    <div class="movements__row">
      <div class="movements__type movements__type--${type}">${
      i + 1
    } ${type}</div>
      <div class="movements__value">${mov}</div>
  </div>`;
  });
};

● 现在我们写好了,但是我们需要将内容插入html中

const displayMovements = function (movements) {
  movements.forEach((mov, i) => {
    const type = mov > 0 ? 'deposit' : 'withdrawal';

    const html = `
    <div class="movements__row">
      <div class="movements__type movements__type--${type}">${
      i + 1
    } ${type}</div>
      <div class="movements__value">${mov}</div>
  </div>`;

    containerMovements.insertAdjacentHTML('afterbegin', html);
  });
};

insertAdjacentHTML(‘afterbegin’, html) 的含义是将指定的 HTML 字符串 html 插入到 containerMovements 元素的开头部分(即作为其第一个子元素),而不会替换原有的内容。
这个方法提供了四个相对位置的选项:
● ‘beforebegin’:在元素之前插入。
● ‘afterbegin’:在元素内部的开头部分插入。
● ‘beforeend’:在元素内部的结尾部分插入。
● ‘afterend’:在元素之后插入。

● 然后我们找一个将一个账户数据传入到函数中尝试一个会不会成功;

const displayMovements = function (movements) {
  movements.forEach((mov, i) => {
    const type = mov > 0 ? 'deposit' : 'withdrawal';

    const html = `
    <div class="movements__row">
      <div class="movements__type movements__type--${type}">${
      i + 1
    } ${type}</div>
      <div class="movements__value">${mov}</div>
  </div>`;

    containerMovements.insertAdjacentHTML('afterbegin', html);
  });
};

displayMovements(account1.movements);

注:下面应用程序的隐藏是通过CSS中透明图实现的,我们实现要将其注释一下,从而查看我们的视图
在这里插入图片描述

● 现在再刷新一下页面查看一下
在这里插入图片描述

成功了!

● 但是我们发现HTML原先存在的数据仍然存在
在这里插入图片描述

● 所以我们要将他去除掉,再插入代码之前,将HTML块中数据清除
const displayMovements = function (movements) {
  containerMovements.innerHTML = '';  //清楚容器中的数据
  movements.forEach((mov, i) => {
    const type = mov > 0 ? 'deposit' : 'withdrawal';

    const html = `
    <div class="movements__row">
      <div class="movements__type movements__type--${type}">${
      i + 1
    } ${type}</div>
      <div class="movements__value">${mov}</div>
  </div>`;

    containerMovements.insertAdjacentHTML('afterbegin', html);
  });
};

displayMovements(account1.movements);

在这里插入图片描述

这样原来存在的数据就没有了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/521108.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nacos 入门篇---客户端如何发起服务注册?怎么发送服务心跳的(二)

一、引言 上个章节我们简单学习和使用了下Nacos服务自动注册&#xff0c;本文就来分析下Nacos客户端自动注册服务是怎么实现的&#xff5e; 二、目录 目录 一、引言 三、Nacos 源码编译 1.1 拉取代码 1.2 运行起来 四、客户端使用版本选择 五、Nacos客户端项目启动为什么会…

c++的学习之路:14、list(1)

本章讲一下如何使用list 一、list介绍 首先还是看一看官方文档的介绍如下图&#xff0c;如下方五点&#xff1a; 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向链表结构&#xff0c;双向链…

阿里微服务质量保障系列:域内测试

进入阿里之前&#xff0c;我就职的公司所在部门的产品都是单体应用&#xff0c;例如第一家公司是做投顾平台的&#xff0c;第二家公司所在的团队是做在线教育的&#xff0c;负责的产品是内容生产平台。投顾平台这个产品是服务于券商投顾员工的&#xff0c;属于券商内部应用&…

公开课学习——仿抖音直播平台

文章目录 直播抖音的直播原理Java继承直播客户端工具&#xff1a; ffmpeg客户端和网页集成CDN网络——性能提升关键——边缘计算 实时聊天——IM系统怎么实现&#xff1f;——websocketIM系统消息如何转发&#xff1f;直播场景IM系统是什么样子&#xff1f; 直播 抖音的直播原…

R语言实现:统计学及计量专业中的多种平均值计算方式

平均值在计量专业和统计学中有着广泛的应用如&#xff1a;描述数据集中趋势、比较不同组数据、评估数据的代表性、决策和判断、回归分析概率统计与财务分析等。此外&#xff0c;在计量专业中&#xff0c;平均值还被广泛应用于各种测量和校准过程中&#xff0c;以确保测量结果的…

34.Python从入门到精通—Python3 正则表达式检索和替换

34.从入门到精通&#xff1a;Python3 正则表达式检索和替换 repl 参数是一个函数 正则表达式对象 正则表达式修饰符 - 可选标志 正则表达式模式* 正则表达式实例 检索和替换repl 参数是一个函数正则表达式对象正则表达式修饰符 - 可选标志正则表达式模式*正则表达式实例 检索和…

动规训练4

目录 一、买股票的最佳实际含冷冻期 1、题目解析 2、算法原理 a状态表示方程 b状态转移方程 c初始化 d填表顺序 e返回值 3、代码 4、感想 二、买股票的最佳时机函手续费 1、题目解析 2、算法原理 a状态表示方程 b状态转移方程 c初始化 d填表顺序 e返回值 3、…

STM3定时器输入捕获、超声波测距

1、超声波测距模块介绍 1、HC-SR04共四个引脚&#xff1a;VCC、GND、Trig、Echo&#xff0c;如下图 2、使用 1、通过gpio口向Trig引脚发送一个脉冲信号。 2、HC-SR04接收到脉冲信号后&#xff0c;就会向外发送一段超声波&#xff0c;模块会将echo拉高。 …

Web CSS笔记3

一、边框弧度 使用它你就可以制作盒子边框圆角 border-radius&#xff1a;1个值四个圆角值相同2个值 第一个值为左上角与右下角&#xff0c;第二个值为右上角与左下角3个值第一个值为左上角, 第二个值为右上角和左下角&#xff0c;第三个值为右下角4个值 左上角&#xff0c;右…

舞蹈网站制作分享,舞蹈培训商城网站设计案例分享,wordpress主题分享

嘿&#xff0c;朋友们&#xff01;今天我要跟你们唠一唠一个超级酷炫的舞蹈培训商城网站设计案例。 咱先说说这个网站的目标哈&#xff0c;那就是得让喜欢舞蹈的小伙伴们能够轻轻松松找到自己心水的课程和商品。 那制作过程都有啥呢&#xff1f;别急&#xff0c;听我慢慢道来。…

c# wpf LiveCharts 绑定 多线条 简单试验

1.概要 c# wpf LiveCharts 绑定 多线条 简单试验 2.代码 <Window x:Class"WpfApp3.Window4"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http:…

清明假期作业

1、实现文件夹的拷贝功能 注意判断被拷贝的文件夹是否存在&#xff0c;如果不存在则提前 不考虑递归拷贝的问题 #include<myhead.h> int my_copy(char* name,const char *p) {char buf[256]"./";strcat(buf,p);strcat(buf,"/");strcat(buf,name);in…

P1001 A+B Problem

1.题目背景 强烈推荐新用户必读帖。 不熟悉算法竞赛的选手请看这里&#xff1a; 算法竞赛中要求的输出格式中&#xff0c;**不能有多余的内容&#xff0c;这也包括了“请输入整数a和b” 这一类的提示用户输入信息的内容。**若包含了这些内容&#xff0c;将会被认为是Wrong Answ…

嵌入式Qt QGridLayout网格布局管理器

一.QGridLayout网格布局管理器 //以行为单位 设置比例系数 void QGridLayout::setRowStretch ( int row, int stretch ) //以列为单位 设置比例系数 void QGridLayout::setColumnStretch ( int column, int stretch ) 实验&#xff1a; Widget.h&#xff1a; #ifndef _WIDGE…

dm8数据迁移工具DTS

dm8数据迁移工具DTS DTS工具介绍 DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。 DM数据迁移工具支持&#xff1a; ◆ 主流大型数据库Oracle、SQLServer、MyS…

3.6 CSS定位

CSS定位可以将HTML元素放置在页面上指定的任意地方。CSS定位的原理是把页面左上角的点定义为坐标为(0,0)的原点&#xff0c;然后以像素为单位将整个网页构建成一个坐标系统。其中x轴与数学坐标系方向相同&#xff0c;越往右数字越大&#xff1b;y轴与数学坐标系方向相反&#x…

r3live使用realsense避免相机内参标定

话题 /camera/color/camera_info 消息格式 sensor_msgs/CameraInfo distortion_model&#xff1a;指定了相机畸变模型&#xff0c;"plumb_bob"简单的径向和切向畸变模型 D&#xff1a;畸变参数&#xff0c;取决于畸变模型&#xff0c;(k1, k2, t1, t2, k3)&#xf…

Shell编程初识

Shell初识 ShellShell 脚本Shell 环境第一个shell脚本实例 运行 Shell 脚本方法&#xff1a;1、作为可执行程序2、作为解释器参数3.使用 . (空格)脚本名称来执行4.使用 source 来执行(主要用于生效配置文件)区别1.关于执行权限2.关于是否开启子shell线程 脚本排错及问题判断she…

dm8 备份与恢复

dm8 备份与恢复 基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…

Linux学习之路 -- 进程篇 -- PCB介绍2 -- 标识符和进程创建

前面我们介绍了的进程的标识符&#xff0c;下面继续介绍进程标识符和进程创建的知识。 目录 一、进程创建 <1>fork函数的返回值 <2>创建子进程的目的 <3>代码共享 二、fork函数的相关问题 <1>为什么给父进程返回子进程的pid&#xff0c;给子进程…