数据渲染 DOM循环

最新推荐文章于 2024-04-29 10:40:41 发布

艺能人金广发

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量419

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Chico_Feng/article/details/128200392

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul class="list">
    <li>111苹果</li>
    <li>222葡萄</li>
    <li>333橘子</li>
</ul>
</body>
</html>
<script>
    var lis=document.querySelectorAll('li');
    var list=document.querySelector('.list')
//    var lis=document.getElementsByTagName('li')
//    var list=document.getElementsByClassName('list')[0]

    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover= function () {
            this.style.background="lightblue"
        }
        lis[i].onmouseout= function () {
            this.style.background='#fff'
        }
    }
    var data=["111是香蕉",'222是桃子','333是西瓜']
    var str=""
    for(var j=0;j<data.length;j++){
        var li=document.createElement('li')
        li.innerHTML=data[j]
        list.appendChild(li)
    }
</script>