JS之简单的页面渲染。

// 渲染页面流程 :

// - 1. 我们需要先去排页面;

// - 2. 结构排列好了之后我们才能考虑使用js进行页面渲染;

// 渲染的字符串结构 :

// 1. 容器结构开头 : <div class="container">

// 2. box结构 (根据我们创建的商品列表，进行box结构拼接)

// 3. 容器结构结尾 : </div>

CSS样式部分忽略。

<script>
//容器
 document.write('<div class="container">');
//需要的数据
var list = [
        {
                src : "https://image.gogoup.com/20220223/1645584749461.jpg",
                title : "儿童美育，怎么避免孩子成为俗气的人？"
        },
        {
                src : "https://image.gogoup.com/20220323/1648002327805.jpg",
                title : "(加群明晚看直播)零基础Ai商业插画全能班"
        },
        {
                src : "https://image.gogoup.com/20220311/1646979105795.png",
                title : "IP形象设计全解实战班"
        },
        {
                src : "https://image.gogoup.com/20220224/1645710319923.jpg",
                title : "B端UI设计研修班(报名优惠)"
        },
        {
                src : "https://image.gogoup.com/20220223/1645617035442.jpg",
                title : "(可插班)C4D+AE动态视觉综合提升班"
        }
   ]

//根据list之中的对象里面的数据，去渲染html结构。

var html='';
for(var i = 0; i<list.length; i++){
     // 以后我们会经常处理这样的复杂结构字符串拼接; 
            // - 小技巧 : 
            // - 1. 保持原有的html结构
            // - 2. 让每行都变成一个独立的字符串; 
            // - 3. 在除了最后一行字符串之外每行字符串的结构都添加上一个 + 
            html += '<div class="box">' + 
                        '<img src="' + list[i].src +'" alt="">' + 
                        '<div class="title">'+
                             list[i].title + 
                        '</div>' + 
                    '</div>'
}

document.write(html);

document.write('</div>');

</script>