使用array对象储存5位学员的姓名,并在网页中输出,写一个简单的源代码,每个名字一行
时间: 2024-02-11 07:09:15 浏览: 27
好的,以下是一个简单的源代码示例,可以将5个学员姓名存储到数组中,并将其逐行输出到网页上:
```html
<!DOCTYPE html>
<html>
<head>
<title>学员名单</title>
<meta charset="utf-8">
</head>
<body>
<h1>学员名单</h1>
<ul id="student-list"></ul>
<script>
var students = ["Tom", "Jerry", "Mickey", "Minnie", "Donald"];
var studentList = document.getElementById("student-list");
for (var i = 0; i < students.length; i++) {
var li = document.createElement("li");
li.innerHTML = students[i];
studentList.appendChild(li);
}
</script>
</body>
</html>
```
在上面的代码中,我们首先创建了一个包含5个学员姓名的数组 `students`,然后通过 `document.getElementById()` 方法获取页面上的一个 `<ul>` 元素,并将其赋值给变量 `studentList`。接着,我们使用 `for` 循环遍历 `students` 数组中的每个元素,为每个元素创建一个 `<li>` 元素,并将其添加到 `studentList` 列表中。最后,我们将每个学员的姓名赋值给新创建的 `<li>` 元素的 `innerHTML` 属性,从而在页面上显示出所有学员的姓名,每个名字一行。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)