首页 > 试题广场 >

列表动态渲染

[编程题]列表动态渲染
  • 热度指数：14714 时间限制：C/C++ 3秒，其他语言6秒 空间限制：C/C++ 256M，其他语言512M
  • 算法知识视频讲解
请补全JavaScript代码，将预设代码中的"people"数组渲染在页面中。实现下面的列表：
  • 牛油1号 20岁
  • 牛油2号 21岁
  • 牛油3号 19岁
算法知识视频讲解
添加回答
HTML/CSS/JavaScript
^入戏太深头像 ^入戏太深
使用文档碎片，将添加的li暂存起来，最后一起渲染出来 
let frg = document.createDocumentFragment()
for(let i = 0;i < people.length; i++){
    let list = document.createElement("li")
    list.innerText = `${people[i].name} ${people[i].age}岁`
    frg.appendChild(list)
}
ul.appendChild(frg)

发表于 2021-12-04 16:53:04 回复(1)
HTML/CSS/JavaScript
韩wy头像 韩wy
  for(let item of people){ 
                     ul.innerHTML+= `<li>牛油${item.id}号 ${item.age}岁</li>`
                }
发表于 2022-02-26 22:01:57 回复(1)
HTML/CSS/JavaScript
yun_029头像 yun_029 
people.forEach(val=> {
   ul.innerHTML  += `<li>${val.name} ${val.age}岁</li>`
})

发表于 2021-12-07 00:06:08 回复(0)
载梦覆星河头像 载梦覆星河

列表动态渲染

看了别人的解法，感觉自己好菜，从算法题中培养自己的编码能力

<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');
            // 补全代码
            // 利用forEach循环 people对象
            people.forEach(item => {
               // 创建小li，并利用模板字符串将其渲染到网页上
                let lis = document.createElement('li');
                lis.innerHTML = `${item.name}  ${item.age}岁`;
                ul.append(lis);
            })


        </script>
发表于 2022-04-13 15:16:50 回复(0)
HTML/CSS/JavaScript
小文同学在努力头像 小文同学在努力
笨方法 
        <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');
            // 补全代码
            var str = '';
            for(var i = 0;i < people.length;i++) {
                str += '<li>' + people[i].name + people[i].age +'岁'+ '</li>';
            }
            ul.innerHTML = str;
        </script>


发表于 2022-03-20 14:38:21 回复(0)
HTML/CSS/JavaScript
苦衷头像 苦衷
people.forEach(item => {
                let li = document.createElement('li')
                li.innerHTML = item.name + item.age +'岁'
                  ul.appendChild(li)
               })
发表于 2021-12-01 18:55:02 回复(2)
错把路灯当月光头像 错把路灯当月光 






        请问为啥不对
            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');
            // 补全代码

           const str= people.map(function(item){
            const {name,age}=item
                return `${name} ${age}岁`
              }).join('') 
              ul.innerHTML=str
编辑于 2024-03-25 21:14:52 回复(0)
牛客404070821号头像 牛客404070821号
            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');
            // 补全代码
            ul.innerHTML = people.map(v=>`<li>${v.name}+' '+${v.age}+'岁'</li>`)
发表于 2023-08-31 11:19:37 回复(1)
HTML/CSS/JavaScript
QiuYeDx头像 QiuYeDx 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <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');
            // 补全代码
            people.map((item, index) => {
                ul.innerHTML += `
                    <li>${item.name} ${item.age}岁</li>
                `;
            })
        </script>
    </body>
</html>

发表于 2023-06-07 23:44:54 回复(0)
李小白白白白又白头像 李小白白白白又白 
 // 补全代码
ul.innerHTML = people.reduce((pre,cur)=>`${pre}<li>${cur.name} ${cur.age}岁</li>`,'');

发表于 2024-03-26 01:51:58 回复(0)
牛客516045375号头像 牛客516045375号 
   let str=''
           people.forEach(item=>{
                 str+=`<li>${item.name}${item.age}岁</li>`
           })
           ul.innerHTML=str

发表于 2023-09-02 15:51:16 回复(0)
Sonder2头像 Sonder2 
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');
            // 补全代码
            people.forEach(item=>{
                let data = document.createElement('li')
                data.innerText = item.name + ' ' + item.age + '岁'
                ul.append(data)
            })
发表于 2023-08-24 11:48:55 回复(0)
If4U头像 If4U 
<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');
    // 补全代码

    const html = people.reduce((prev, current) => {
        return prev + `<li>${current.name} ${current.age}</li>`;
    }, '');

    ul.innerHTML = html;
</script>

发表于 2023-07-28 20:48:25 回复(0)
HTML/CSS/JavaScript
零樲头像 零樲 
<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');
    // 补全代码
    var str = ""
    for(let i=0;i<people.length;i++){
        str += "<ol>"+people[i].name+people[i].age+"岁</ol>"
    }
    ul.innerHTML = str
</script>
这个最原始的写法怎么也错了
发表于 2023-03-10 15:09:51 回复(1)
HTML/CSS/JavaScript
9527176头像 9527176 
let str = ''
people.forEach(item => {
    str += `${item.name}+' '+${item.age}岁`
})
ul.innerHTML = str

发表于 2023-02-19 21:47:36 回复(0)
HTML/CSS/JavaScript
不想上班芒果觉醒了头像 不想上班芒果觉醒了 
 <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');
            // 补全代码
            let str ="";
            people.map(v=>  {str+= `<li><span>${v.name}</span> <span>${v.age}岁</span></li>`}).join(" ")
            ul.innerHTML = str;
        </script>

发表于 2023-02-14 22:26:11 回复(0)
HTML/CSS/JavaScript
夏沫、柠萌头像 夏沫、柠萌 
    people.map(aa => {
        var li = document.createElement('li')
        li.innerHTML = `${aa.name}  ${aa.age}岁`
        ul.appendChild(li)
    })

发表于 2023-02-06 15:55:10 回复(0)
牛客273635580号头像 牛客273635580号
            people.forEach((item,index) => {
                var ele=document.createElement('li')
                ele.innerHTML=item.name+' '+item.age
                ul.appendChild(ele)
            });
发表于 2023-01-29 15:00:42 回复(0)
HTML/CSS/JavaScript
HaShMap1024头像 HaShMap1024 
      let str = '';
      people.forEach((value) => {
        str += '<li>' + value.name + value.age + '</li>';
      });
      ul.innerHTML = str;

发表于 2022-12-24 20:25:18 回复(0)
阿泽°头像 阿泽°


发表于 2022-12-06 10:48:05 回复(0)
提交观点

问题信息

难度：
50条回答 509浏览

热门推荐

通过挑战的用户

查看代码

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号