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

原文地址：https://blog.csdn.net/IKUNzhenin/article/details/136241672

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！