用js-插入HTML元素

这段代码是一个有序列表(ordered list),使用<ol>标签包裹起来。有序列表中的每一项由<li>标签表示。

在这个例子中,有三个列表项:

  1. 目录 1
  2. 目录 2
  3. 目录 3

这段代码会渲染成一个有序列表,显示为:

  1. 目录 1
  2. 目录 2
  3. 目录 3

<ol>
<li>目录 1</li>
<li>目录 2</li>
<li>目录 3</li></ol>
<button id="btn1">添加目录</button>

 

<script type="text/javascript">let btn1=document.getElementById('btn1');console.log(btn1);let ol =document.getElementsByTagName('ol')[0];let li=document.getElementsByTagName('li');console.log(li);btn1.onclick=function(){ol.innerHTML+=`<li>追加目录4</li>`}
</script>

 

这段代码是一个JavaScript代码块,使用`<script>`标签包裹起来,并设置了`type="text/javascript"`。

这段代码执行了以下操作:
1. 使用`document.getElementById('btn1')`获取了一个id为"btn1"的元素,并将其赋值给`btn1`变量。
2. 使用`console.log(btn1)`将`btn1`变量输出到控制台,用于验证获取到的元素是否正确。
3. 使用`document.getElementsByTagName('ol')[0]`获取了所有的`<ol>`元素,并取得第一个元素赋值给`ol`变量。
4. 使用`document.getElementsByTagName('li')`获取了所有的`<li>`元素,并将其赋值给`li`变量。
5. 使用`console.log(li)`将`li`变量输出到控制台,用于验证获取到的元素是否正确。
6. 为`btn1.onclick`事件添加了一个函数。当点击`btn1`时,执行以下操作:
   - 使用`ol.innerHTML+=`追加了一个包含文本"追加目录4"的`<li>`元素到`ol`元素中。

这段代码的作用是,当点击id为"btn1"的按钮时,在现有的有序列表中追加一个新的列表项,内容为"追加目录4"。

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

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

相关文章

如何使用Docker部署开源Leanote蚂蚁笔记并发布个人博客至公网

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 1. 安装Docker2. Docker本地部署Leanote蚂蚁笔记3. 安装…

notepad++运行python闪一下就没啦

问题&#xff1a;Notepad直接快捷键运行Python代码,出现闪一下就没了 解决措施&#xff1a; ①点击菜单运行(Run) --> 运行(Run)弹出的对话框 ②把 cmd /k python "$(FULL_CURRENT_PATH)" & ECHO. & PAUSE & EXIT 粘贴进入这个对话框内 ③点击保存&a…

由面试题“Redis是否为单线程”引发的思考

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

代码随想录三刷day05

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣59. 螺旋矩阵 II二、力扣54. 螺旋矩阵 前言 相信大家有遇到过这种情况&#xff1a; 感觉题目的边界调节超多&#xff0c;一波接着一波的判断&#xff0…

边坡位移监测设备:守护工程安全的前沿科技

随着现代工程建设的飞速发展&#xff0c;边坡位移监测作为预防山体滑坡、泥石流等自然灾害的重要手段&#xff0c;日益受到人们的关注。边坡位移监测设备作为这一领域的关键技术&#xff0c;以其高精度、实时监测的特点&#xff0c;成为守护工程安全的重要武器。 一、边坡位移…

走深向实,数字化转型助力央国企高质量发展|爱分析报告

央国企数字化转型背景 1.1 央国企数字化转型驱动因素及目标 在政策、使命、内生需求的共同驱动下&#xff0c;数字化转型已成为央国企发展的必然选择。 政策指引&#xff1a;早在2020年&#xff0c;国资委发布了《关于加快推进国有企业数字化转型工作的通知》&#xff0c;对国…

信钰证券|印花税下降对股市的影响?印花税下降利好哪些板块?

投资者在买卖股票时&#xff0c;需求交纳一定的佣金费用、印花税和过户费用&#xff0c;其间印花税和过户费用&#xff0c;随着方针的变动&#xff0c;会进行相应的调整&#xff0c;那么&#xff0c;印花税下降对股市的影响&#xff1f;印花税下降利好哪些板块&#xff1f; 印花…

Android 系统定位和高德定位

文章目录 Android 系统定位和高德定位系统定位工具类封装LocationManager使用 高德定位封装高德地图使用 Android 系统定位和高德定位 系统定位 工具类 public class LocationUtils {public static final int REQUEST_LOCATION 0xa1;/*** 判断定位服务是否开启*/public sta…

(科目三)信息技术基础

1.信息与信息技术概述 1.1 信息的定义和表示 一、信息的定义&#xff1a; 信息就是通过语言、文字、图形/图像、声音、视频等传播的内容。 信息≠消息&#xff0c;信息就是消息的内核&#xff0c;消息是信息的外壳。 信息不是某种信号&#xff0c;也不等同于知识。 数据&…

算法沉淀——穷举、暴搜、深搜、回溯、剪枝综合练习三(leetcode真题剖析)

算法沉淀——穷举、暴搜、深搜、回溯、剪枝综合练习三 01.字母大小写全排列02.优美的排列03.N 皇后04.有效的数独 01.字母大小写全排列 题目链接&#xff1a;https://leetcode.cn/problems/letter-case-permutation/ 给定一个字符串 s &#xff0c;通过将字符串 s 中的每个字…

设计模式--原型模式和建造者模式

原型模式 原型模式&#xff08;Prototype Pattern&#xff09;是指原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些这些原型创建新的对象&#xff0c;属于创建型模式。&#xff08;对不通过new关键字&#xff0c;而是通过对象拷贝来实现创建对象的模式称为原型模式&a…

【达梦数据库】查看pesg回滚段信息的视图和SQL

一些达梦回滚段是使用情况的查询SQL&#xff0c;供排查“回滚记录版本太旧&#xff0c;无法获取用户记录” 等类似问题时使用 视图名说明主库备库v$pseg_items显示回滚系统中当前回滚项信息&#xff08;回滚线程的工作信息&#xff09;总行数WORKER_THREADS1查询 no rowsv$pseg…

安装Windows Server 2025 搭建免费云桌面系统

介绍 Windows Server 2025 为 Hyper-V 带来了多项增强功能和新的存储特性&#xff0c;主要用于优化虚拟机的运行体验。这些新特性涵盖 GPU 虚拟化、新的 ReFS 去重功能&#xff0c;以及在非 AD 域的集群上进行虚拟机实时迁移。 云桌面方案的用户最关心的GPU-P的技术也将在Win…

VMware虚拟机文件夹共享失效

问题现象 今天开启虚拟机的时候就看到这个&#xff0c;感觉又要有不好的事情发生了。 果不其然&#xff0c;开机之后弹出这个&#xff0c;我当时还没意识到这个dll文件会对我的正常使用产生什么样的影响。 然后就发现文件根本拷贝不进去虚拟机里面&#xff0c;连虚拟机里面的共…

缓存篇—缓存雪崩、缓存击穿、缓存穿透

缓存异常会面临的三个问题&#xff1a;缓存雪崩、击穿和穿透。 其中&#xff0c;缓存雪崩和缓存击穿主要原因是数据不在缓存中&#xff0c;而导致大量请求访问了数据库&#xff0c;数据库压力骤增&#xff0c;容易引发一系列连锁反应&#xff0c;导致系统奔溃。不过&#xff0…

petalinux_zynq7 驱动DAC以及ADC模块之三:实现C语言API并编译出库被python调用

前文&#xff1a; petalinux_zynq7 C语言驱动DAC以及ADC模块之一&#xff1a;建立IPhttps://blog.csdn.net/qq_27158179/article/details/136234296petalinux_zynq7 C语言驱动DAC以及ADC模块之二&#xff1a;petalinuxhttps://blog.csdn.net/qq_27158179/article/details/1362…

跨界计算与控制,强化显控和UI, 君正MPU再添新旗舰--Ingenic MPU X2600隆重发布

近日&#xff0c;北京君正隆重发布MPU芯片新产品X2600。该产品以商业和工业应用的数个细分领域为重点目标市场&#xff0c;兼顾通用处理器应用需求。无论从CPU结构的设计&#xff0c;还是专门控制器和接口的配备&#xff0c;都体现了北京君正MPU团队“技术路线上追求自主跨界&a…

力扣101 对称二叉树 Java版本

文章目录 题目描述递归解法非递归解法 题目描述 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出…

性能全面提升!探索ONLYOFFICE最新8.0版:更快速、更强大,PDF表单编辑轻松搞定!

文章目录 PDF表单功能表单模板 屏幕朗读器功能EXCEL新增功能单变量求解图表向导数字排序 PPT 新增功能新增语言区域设置和优化插件界面 ONLYOFFICE 是由 Ascensio System SIA 推出的一款功能强大的办公套件&#xff0c;其中提供了适用于文本文档、表格以及演示文稿的在线编辑软…

前端|Day2:列表、表格、表单(黑马笔记)

Day2&#xff1a;列表、表格、表单 目录 Day2&#xff1a;列表、表格、表单一、列表1.无序列表2.有序列表3. 定义列表 二、表格1.基本使用2. 表格结构标签(了解)3.合并单元格 三、表单1.input 标签2.input 标签占位文本3.单选框4.上传文件5.多选框6.下拉菜单7.文本域8.label 标…