用js-插入HTML元素

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

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

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

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

  1. 目录 1
  2. 目录 2
  3. 目录 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"`。

这段代码执行了以下操作:

  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"。

相关推荐
三天不学习11 分钟前
JavaScript 中 call 和 apply 的用法与区别
开发语言·前端·javascript
大聪明了17 分钟前
Nuxt3 使用 ElementUI Plus报错问题
前端
Ama_tor23 分钟前
网页制作16-Javascipt时间特效の设置D-DAY倒计时
前端·javascript·html
几何心凉34 分钟前
两款好用的工具,大模型训练事半功倍.....
前端
Dontla1 小时前
黑马node.js教程(nodejs教程)——AJAX-Day01-04.案例_地区查询——查询某个省某个城市所有地区(代码示例)
前端·ajax·node.js
威哥爱编程1 小时前
vue2和vue3的响应式原理有何不同?
前端·vue.js
呆呆的猫1 小时前
【前端】Vue3 + AntdVue + Ts + Vite4 + pnpm + Pinia 实战
前端
qq_456001651 小时前
30、Vuex 为啥可以进行缓存处理
前端
浪裡遊1 小时前
Nginx快速上手
运维·前端·后端·nginx
天生我材必有用_吴用2 小时前
Vue3后台管理项目封装一个功能完善的图标icon选择器Vue组件动态加载icon文件下的svg图标文件
前端