热门使用html和CSS动态创建列表

Question

我正在做作业，并且用html，css，javascript编写了前端。直到现在，当我按下按钮时，我都会从后端获取一些数据，并在javascript中解析响应。响应是一组项目。一个项目是一个结构。我想要的是动态构建这些项目的列表。我在Google上找不到用javascript做到这一点的方法。一些提示/帮助？

您可以在下面看到的我尝试过的操作是将一些HTML附加到HTML元素-没用。

xhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {

                source.value = "";

                destination.value = "";

                var array_rides = JSON.parse(this.responseText).results;

                var rides_length = array_rides.length;

                for (var i = 0;i < rides_length;i++) {

                    console.log(array_rides[i][DRIVER]);

                    console.log(array_rides[i][RIDERS]);

                    console.log(array_rides[i][SOURCE]);

                    console.log(array_rides[i][DESTINATION]);

                    console.log(array_rides[i][START]);

                    console.log(array_rides[i][SEATS_AVAILABLE]);

                    console.log(array_rides[i][SEATS_TOTAL]);

                    my_list.append('<span class="name">{0}</span>'.format(array_rides[i][DRIVER]));

                }

            }

};

因此，我想要一个动态填充的列表。类似于（餐桌）：

array_rides[0][DRIVER], array_rides[0][RIDERS], ...

array_rides[1][DRIVER], array_rides[1][RIDERS], ...

...

array_rides[n][DRIVER], array_rides[n][RIDERS], ...

当然，它继承了一些CSS。