数据渲染字符串拼接

最新推荐文章于 2025-12-27 19:25:02 发布

原创最新推荐文章于 2025-12-27 19:25:02 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

<!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')

    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++){
        str+="<li>"+data[j]+"</li>"
    }
    //document.querySelector('.list').innerHTML=str
   list.innerHTML=str
</script>