动态添加li 实现

小白目

已于 2022-04-23 11:32:49 修改

阅读量793

点赞数

分类专栏： css 文章标签： css3 javascript

于 2022-03-25 21:24:05 首次发布

本文链接：https://blog.csdn.net/qq_37974755/article/details/123745456

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

需求：动态生成多个li标签，并且标签内容包含序号index。

以下提供俩种实现方法：

<style>
    *{
        margin:0;
        padding:0
    }

    li{
        width:100px;
        height:50px;
        margin:20px;
        background-color : red
    }
</style>

法一：

<body>
    <ul id = 'qq'></ul>
    
    <script>
        var UL = document.getElementsByTagName('ul')[0]
     // var UL =  document.querySelector('ul')
        var str =''
        for(let i = 0;i<5;i++)
            str +=`<li>${i}</li>`        
        UL.innerHTML =str
        UL.addEventListener('click',function(event){
            alert(event.target.innerHTML)
        })
        
    </script>
</body>

法二：

                var arrLi = [[1,2,3], ['嘻嘻', 'hh']];
                  for (var j = 0; j < arrLi.length; j++) {
                    document.body.innerHTML += '<ul></ul>';
                    var ul = document.getElementsByTagName('ul');
                    for (var i = 0; i < arrLi[j].length; i++) {
                      ul[j].innerHTML += '<li>' + arrLi[j][i] + '</li>';
                    }
                  }

备注：此demo有助于练习js 与css dom 操作，且为大厂面试题！

小白目

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
动态添加li 实现

需求：动态生成多个li标签，并且标签内容包含序号index。以下提供俩种实现方法：<style> *{ margin:0; padding:0 } li{ width:100px; height:50px; margin:20px; background-color : red }</style>法一：<body> .
复制链接

扫一扫