列表项目<li>标签的使用

列表项目<li>标签的使用

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

  • 标签定义列表项目。

  • 标签可用在有序列表
      、无序列表
        和菜单列表中。

        在有序列表中使用

        <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');创建一个新的

      • 标签,其可以使用的各个属性如下所示。

        • ele.textContent:在列表项
        • 中添加文本内容,例如ele.textContent='仅填写li内的内容';
        • ele.innerHTML:在列表项
        • 中添加html代码,例如ele.innerHTML='
        • 添加html代码
        • ';
        • ele.outerHTML:连同使用id获取元素本级的列表项
        • 标签自身?待验证
          此处先给出一张百度百科中的图示,以id为"testdiv"的div为例:
          在这里插入图片描述
  • 你可能感兴趣的:(网站开发,html,html5)