这段代码是一个有序列表(ordered list),使用
<ol>
标签包裹起来。有序列表中的每一项由<li>
标签表示。在这个例子中,有三个列表项:
- 目录 1
- 目录 2
- 目录 3
这段代码会渲染成一个有序列表,显示为:
- 目录 1
- 目录 2
- 目录 3
html<ol> <li>目录 1</li> <li>目录 2</li> <li>目录 3</li> </ol> <button id="btn1">添加目录</button>
javascript<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"`。
这段代码执行了以下操作:
使用`document.getElementById('btn1')`获取了一个id为"btn1"的元素,并将其赋值给`btn1`变量。
使用`console.log(btn1)`将`btn1`变量输出到控制台,用于验证获取到的元素是否正确。
使用`document.getElementsByTagName('ol')[0]`获取了所有的`<ol>`元素,并取得第一个元素赋值给`ol`变量。
使用`document.getElementsByTagName('li')`获取了所有的`<li>`元素,并将其赋值给`li`变量。
使用`console.log(li)`将`li`变量输出到控制台,用于验证获取到的元素是否正确。
为`btn1.onclick`事件添加了一个函数。当点击`btn1`时,执行以下操作:
- 使用`ol.innerHTML+=`追加了一个包含文本"追加目录4"的`<li>`元素到`ol`元素中。
这段代码的作用是,当点击id为"btn1"的按钮时,在现有的有序列表中追加一个新的列表项,内容为"追加目录4"。
用js-插入HTML元素
IKUNzhenin2024-02-26 22:50
相关推荐
莹雨潇潇4 分钟前
Docker 快速入门(Ubuntu版)Jiaberrr12 分钟前
Element UI教程:如何将Radio单选框的圆框改为方框Tiffany_Ho1 小时前
【TypeScript】知识点梳理(三)安冬的码畜日常2 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)太阳花ˉ2 小时前
html+css+js实现step进度条效果小白学习日记3 小时前
【复习】HTML常用标签<table>john_hjy3 小时前
11. 异步编程风清扬_jd3 小时前
Chromium 中JavaScript Fetch API接口c++代码实现(二)丁总学Java3 小时前
微信小程序-npm支持-如何使用npm包