题解 | #列表动态渲染#

思路

这道题看题目要求是根据id的从小到大排序，因此需要先对people数组进行排序。使用模板字符串向li标签中添加内容

代码

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.sort(function(a,b){
        return a.id - b.id
      })
      var frag = document.createDocumentFragment()
      people.forEach(item => {
        var li = document.createElement('li')
        li.innerText = `${item.name}${item.id} ${item.age}`
        frag.append(li)
      });      
      ul.append(frag)