【JavaScript】009.利用数组创建页面列表

原创于 2020-05-03 15:08:34 发布 · 330 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #html #css

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用JavaScript和数组来动态创建HTML页面列表的方法。通过遍历数组中的元素，将其转换为列表项并插入到指定的HTML元素中，实现了页面列表的动态更新。示例代码展示了如何在页面加载完成后，用数组中的数据替代预设的列表内容。

1.目的

利用数组创建页面列表

2.示例代码

图片及源码的github链接
009.利用数组创建页面列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>009.利用数组创建页面列表</title>
    <script type="text/javascript">
        window.onload = function () {
            var aList = ['C++', "Python", "Java", "JavaScript", "php"];
            str = '';

            // 构建html文本
            for(var i=0; i < aList.length; ++i){
                str += "<li>" + aList[i] + "</li>";
            }

            // 获取元素，并修改
            oUl = document.getElementById('list');
            oUl.innerHTML = str;
        }


    </script>
    <style type="text/css">
        .list{
            list-style: none;
            margin: 50px auto 0;
            padding: 0;
            width: 300px;
            height: 305px;
        }

        .list li{
            height: 60px;
            border-bottom: 1px dotted #000;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul id="list" class="list">
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
</body>
</html>