1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

        let ul = document.querySelector('ul')
            // 根据数据个数创建li的个数
        for (let i = 0; i < data.length; i++) {
            let li = document.createElement('li')
                // 给空li追加内容
                // innerHtml可以解析标签；
            li.innerHTML = `   
             <img src=${data[i].src} alt="">
                        <h4>
                            ${data[i].title}
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span> ${data[i].num}</span>人在学习
                        </div>`

            // li追加给ul
            ul.appendChild(li) // 不加引号
        }
    </script>