列表项目＜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为例：
