前端学习笔记之 创建节点 与 添加节点案例

发布留言案例实现

  • 一、案例分析
  • 二、实现过程
  • 三、完整代码

一、案例分析

  1. 核心思路:点击按钮之后,就动态创建 li,添加到 ul 里面;
  2. 创建 li 的同时,把文本域里面的值通过 li.innerHTML 赋值给 li
  3. 显示新的留言( 后面显示:appendChild || 前面显示:insertBefore)

二、实现过程

1. 基本骨架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker容器与宿主拷贝文件

1、从容器里面拷文件到宿主机&#xff1f; 答&#xff1a;在宿主机里面执行以下命令 docker cp 容器名&#xff1a;要拷贝的文件在容器里面的路径 要拷贝到宿主机的相应路径示例&#xff1a; 假设容器名为nginx,要从容器里面拷贝的文件路为&#xff1a;/etc/nginx/nginx.…

云计算如何使企业的业务受益?

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 根据调研机构IDG公司的调查&#xff0c;2018年&#xff0c;69%的企业已经采用云计算技术&#xff0c;而18%的企业还在采用内部…

10个 Python 工程师,9个不合格!!

毋庸置疑&#xff0c;Python越来越被认可为程序员新时代的风口语言。 无论是刚入门的程序员&#xff0c;还是年薪百万的 BATJ 的大牛都无可否认&#xff1a;Python的应用能力是成为一名码农大神的必要项。 所以&#xff0c;很多程序员把Python当做第一语言来学习。 但对于Pytho…

漫谈新零售:疫情对新零售的十大影响

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 席卷全球的新冠疫情&#xff0c;骤然影响了全人类的生活和工作方式。作为一起震动全球的黑天鹅事件&#xff0c;它对整个世界…

SpringBoot2.6.1 elasticsearch7.1.5 Vue

文章目录1. 版本兼容2. 导入依赖3. 配置4. 主页面5. 控制层6. 逻辑处理层7. pojo8. 工具类9. 常量类10. 前端页面项目开源地址1. 版本兼容 框架/组件版本SpringBoot2.6.1elasticsearch7.1.5 2. 导入依赖 <parent><groupId>org.springframework.boot</groupId&…

前端学习笔记之DOM(一)

DOM介绍 1.DOM简介1.1 什么是DOM1.2 DOM树2. 获取元素2.1 如何获取页面元素2.2 根据ID获取2.3 根据标签名获取2.4 通过 HTML5 新增的方法获取2.5 获取特殊元素(body、html)2.5.1 获取body元素2.5.2 获取html元素对象3. 事件基础3.1 事件概述3.2 事件三要素3.2.1 案例3.3 执行…

德勤发布2020技术趋势报告,五个新趋势可引发颠覆性变革

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; “2020 年的趋势将颠覆整个行业&#xff0c;并在未来十年重新定义业务&#xff0c;即使数字创新已成为各种规模企业的常规行为…

ZooKeeper的十二连问,你顶得了嘛?

来源 | 捡田螺的小男孩【前言】一线大厂ZooKeeper的十二连问&#xff0c;你顶得了嘛&#xff1f;本文已经收录到github&#xff1a;https://github.com/whx123/JavaHome什么是Zookeeper面试官&#xff1a;工作中使用过Zookeeper嘛&#xff1f;你知道它是什么&#xff0c;有什么…

【机器学习】脑机接口利器:错误率仅3%

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 编者按&#xff1a;本文来自微信公众号“AI科技评论”&#xff08;ID:aitechtalk&#xff09;&#xff0c;36氪经授权发布。 …

Excel+SQL数据库连接

目录一.语法格式二. 注解2.1 关键字一览表2.2 HDR2.3 IMEX2.3.1 IMEX1三. 简单应用3.1 提取工作表某单元格区域的数据一.语法格式 providerMicrosoft.ACE.OLEDB.12.0; User ID用户名; Data Source数据库完整路径及文件名; Mode模式; Extended Properties"HDRYES;IMEX1&qu…

【人工智能】AI如何把招人效率提高四成

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 近日&#xff0c;受新冠肺炎病毒影响&#xff0c;美国劳工部报告显示&#xff0c;将近 330 万人申请了失业保险&#xff0c;这…

中国移动云智融合峰会 与您相约揽胜九天

当前&#xff0c;5G、AI和云计算等技术加速发展&#xff0c;成为建设智慧社会、网络强国、数字中国的根基。中国移动大力推动人工智能建设和运营&#xff0c;实现规模化AI赋能。在这一背景下中国移动融智战略布局将会有何不同?人工智能时代&#xff0c;云融产业如何打造智能生…

【安全】一名安全数据科学家的日常生活

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 导读&#xff1a;目前网络安全领域的工作岗位远远多于合格的人选&#xff0c;所以好消息是网络安全还是一个适合涉足的领域。…

前端学习之BOM(浏览器对象模型)

目录 1. BOM概述1.1 定义1.2 BOM构成2. window 对象常见事件2.1 窗口加载事件2.2 调整窗口大小事件3. 定时器3.1 定时器3.2 setTimeout() 定时器3.3 停止 setTimeout() 定时器3.4 setInterval()定时器3.5 停止 setInterval() 定时器3.6 this4. JavaScript执行机制4.1 单线程4.2…

docker rocketmq4.7.0

创建数据挂载目录 mkdir -p /app/rocketmq/rmqserver01/logs mkdir -p /app/rocketmq/rmqserver01/store mkdir -p /app/rocketmq/rmqbroker01/logs mkdir -p /app/rocketmq/rmqbroker01/store mkdir -p /app/rocketmq/rmqbroker01/conf编辑配置文件 vim /app/rocketmq/rmqbr…

【远程办公】5分钟一拍照、10分钟一截屏 ?

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 随着新冠病毒疫情的爆发&#xff0c;选择远程办公的企业越来越多&#xff0c;雇主们也开始大量采购监控软件以保证员工们没有…

javaScript PC端网页特效

PC端网页特效 1. 元素偏移量 offset 系列1.1 offset 概述1.2 offset 与 style 区别2. 元素可视区 client 系列2.1 立即执行函数2.2 load 事件的触发3. 元素滚动 scroll 系列3.1 元素 scroll 系列属性3.2 页面被卷去的头部3.3 页面被卷去的头部兼容性解决方案三大系列总结mousee…

明源云:与阿里云生态共同成长

公司介绍 我们公司&#xff0c;即明源云&#xff0c;是国内领先的地产生态链“互联网”服务商&#xff0c;致力于让地产生态链更智慧。秉承产品领先战略和让用户成功的经营理念&#xff0c;我们成功为全国超过5000家房地产企业提供“互联网”解决方案和管理系统&#xff0c;帮…

Docker RocketMQ 集群

创建挂载目录 mkdir -p /app/rocketmq/logs/nameserver-a mkdir -p /app/rocketmq/logs/nameserver-b mkdir -p /app/rocketmq/store/nameserver-a mkdir -p /app/rocketmq/store/nameserver-b mkdir -p /app/rocketmq/logs/broker-a mkdir -p /app/rocketmq/logs/broker-b …