JavaScript动态渲染后端返回数据我正在参加「掘金·启航计划」动态渲染页面浏览器渲染页面步骤：创建DOM树，

动态渲染页面

浏览器渲染页面步骤：

DOM树创建：浏览器通过解析HTML文件，解析器将解析完的HTML转化为DOM对象，再进一步创建DOM树。
CSSOM树创建：CSS解析器解析CSS文件，将CSS解析成CSS对象，然后将这些CSS对象组装成CSSOM树。
渲染树创建：当DOM树和CSSOM树都构建完成，浏览器会根据DOM树和CSSOM树来构建出渲染树。

动态渲染

假设后端接口返回数据结构如下 接口返回数据结构：

data: {
        chiefBonus: { },
        coming: [],
        hot: [
               {
                   name: name,
                   icon: iamge,
                   ...: ...
                },
                { … : … },
                { … : … }
             ],
        movieds:..,
        count: 6666
    }

向ul标签中动态添加一组图片，简单设置一下布局样式如下： 创建一个ul 标签，在ul标签中添加 li 标签，设置页面样式

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            margin-left: 20px;
        }
        li {
            overflow: hidden;
        }
        li img {
            width: 200px;
            /* padding-left: 20px; */
            float: left;
            padding: 10px;
        }
    </style>
    
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

渲染一组图片： 获取接口中返回的图片，名字……需要渲染的数据，将数据动态添加到HTML结构中：循环遍历接口返回数据中数组对象 data，并动态创建 Li 标签，向标签中添加内容，将数组中元素动态添加到li标签中。

    // 发送请求获取接口返回数据，对返回数据进行处理：
    cosnt liList = data.hot;
    // 利用 map 遍历接口返回数据数组，利用模版字符串获取数组对象中元素，
    并将获取到的元素添加到 li 标签中
    cosnt newLiList = liList.map(function (item) {
        return `<li>            
            <img src="${item.psoter}">            
            <h1>${item.name}</h1>
         </li>
        `;
    });
    
    // 查询 ul 节点
    cosnt Lis = document.querySelect("ul");
    // 将动态渲染的li标签添加到 HTML 页面
    Lis.innnerHTML = newLiList.jion(" ");
    console.log(newValueList.join(""));