JS11 列表动态渲染

最新推荐文章于 2024-05-17 13:52:13 发布

是西北呀

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量416

点赞数

分类专栏：牛客js刷题文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45128912/article/details/125765506

版权

牛客js刷题专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

看到ul底下没有li，就知道要在js中去生成新的结点li

<body>
        
    <ul></ul>

        <script>
            var people = [
                { name: '牛油1号', id: 1, age: 20 },
                { name: '牛油2号', id: 2, age: 21 },
                { name: '牛油3号', id: 3, age: 19 },
            ]
            var ul = document.querySelector('ul');
            // 补全代码
            
            for(let i=0;i<people.length;i++){
                // 这个要放在循环里面，每次都新建一个结点
                let li=document.createElement('li');
                console.log(li);

                // 将内容放入li中，记得加i
                li.innerHTML=people[i].name+" "+people[i].age;
                console.log(li.innerHTML);
                
                // 下面两个都可以
                // ul.appendChild(li);
                ul.append(li);
            }
              
        </script>
</body>