列表项目＜li＞标签的使用

龙俊亨

于 2021-09-22 14:30:30 发布

阅读量4.4k

点赞数 1

分类专栏：网站开发文章标签： html html5

本文链接：https://blog.csdn.net/u010804417/article/details/120414280

版权

网站开发专栏收录该内容

16 篇文章 1 订阅

订阅专栏

列表项目＜li＞标签的使用

在有序列表中使用
在无序列表中使用
- 在无序列表中动态添加项
li标签中的各属性

<li>标签定义列表项目。

<li>标签可用在有序列表<ol>、无序列表<ul>和菜单列表<menu>中。

在有序列表中使用

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

运行效果如下所示：

1.Coffee
2.Tea
3.Milk

在无序列表中使用

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

运行效果如下所示：

·Coffee
·Tea
·Milk

在无序列表中动态添加项

根据接口返回内容的条数，通过appendChild(li)方法在无序列表ul中动态添加，代码如下所示：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul id="myid">
	<li>1</li>
</ul>
<button onclick="addli()">在无序列表中添加项</button>
<script>
    function addli(){
        var ele = document.createElement('li');
        ele.textContent='新增li的内容';
        document.getElementById('myid').appendChild(ele);
    }
</script>
</body>
</html>

li标签中的各属性

通过var ele = document.createElement('li');创建一个新的<li>标签，其可以使用的各个属性如下所示。

ele.textContent：在列表项<li>中添加文本内容，例如ele.textContent='仅填写li内的内容';。
ele.innerHTML：在列表项<li>中添加html代码，例如ele.innerHTML='<li>添加html代码</li>';
ele.outerHTML：连同使用id获取元素本级的列表项<li>标签自身？待验证
此处先给出一张百度百科中的图示，以id为"testdiv"的div为例：

龙俊亨

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
列表项目＜li＞标签的使用

标签在有序列表``中使用``在无序列表``中使用``在有序列表<ol>中使用<li><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>运行效果如下所示：1.Coffee2.Tea3.Milk在无序列表<ul>中使用<li><ul> <li>Coffee
复制链接

扫一扫