在有序列表中使用

<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为例：

列表项目＜li＞标签的使用相关推荐

html中写几个li标签,ul标签和li标签 li标签里面能嵌套UL标签吗?
html中的li和ul是什么标签 ul li 是一个组合:是无序列表标签,在实际中用的非常多, 与之对应的是有序列表:ol li 一个无序列表: 咖啡茶牛奶咖啡牛奶茶咖啡牛奶茶 htm ...
php中li标签,HTML li标签是干嘛的？HTML li标签用法和属性的介绍
HTML li标签是干嘛的?HTML li标签用法和属性的介绍都在这里,这篇文章给大家讲述的是HTML li标签的定义及属性介绍,还有html li标签如何去掉无序列表中的默认小点样式. HTML l ...
html5u1 li,HTML5 li 标签
实例 html> html(html.cn) 有序列表: 咖啡茶牛奶无序列表: 咖啡茶牛奶运行实例 » 点击 "运行实例" 按钮查看在线实例浏览器支持目前多数 ...
ul列表li标签前加带有颜色的圆点技巧
项目开发中,ul列表布局时li标签带有样式圆点??应该如何去处理呢? 一般情况下,默认的li标签前是有黑色小圆点,但是其颜色无法改变. 在布局初始化的时候我们会去掉默认样式. 所以,今天就为大家讲解一 ...
利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)
在越来越流行的 DIV+CSS建站模式中,对于首页或频道主页放置的大量栏目或信息列表,普遍采用的是 HTML中的列表类标签:ul li.ol li.dl dt dd. 对于这些标签除了可以直接使用CS ...
鼠标悬停在li标签上时显示一个弹框_HTML标签——列表标签
列表使用场景: 内容相关.结构相似.样式相近的内容,根据内容的不同分为:无序列表.有序列表.定义列表无序列表:两个标签<ul>和<li>,是嵌套关系,快捷键ul>li ...
css 去掉li 标签列表项前面的点
/* ul里面的列表项 li */ ul>li{/* 去掉li标签列表项前面的点 */list-style: none; }
li前面的原点或者方的样式修改html中列表项li所显示的圆点的颜色？，以及相关样式的设定...
如何修改html中列表项li所显示的圆点的颜色?,以及相关样式的设定这是li标签自带的圆点的颜色改变,代码如下: .centerbt li{ content:"."; col ...
html5无序列表，有序列表，定义列表，组合标签，div分区标签
<!DOCTYPE html > <html lang="en"> <head><meta charset="UTF-8&quo ...

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

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

在有序列表中使用

在无序列表中使用

在无序列表中动态添加项

li标签中的各属性

列表项目＜li＞标签的使用相关推荐

最新文章

热门文章