js 把列表字典写入网页中
时间: 2024-02-24 22:58:34 浏览: 30
你可以使用 JavaScript 将列表或字典数据写入到网页中。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Write List/Dictionary to Webpage</title>
</head>
<body>
<ul id="myList"></ul> <!-- unordered list -->
<br>
<div id="myDict"></div> <!-- dictionary -->
<script>
// create a list
var myList = ["Apple", "Banana", "Orange"];
var listHTML = "";
for (var i = 0; i < myList.length; i++) {
listHTML += "<li>" + myList[i] + "</li>";
}
document.getElementById("myList").innerHTML = listHTML;
// create a dictionary
var myDict = {"Name": "John Doe", "Age": 30, "City": "New York"};
var dictHTML = "";
for (var key in myDict) {
dictHTML += "<p>" + key + ": " + myDict[key] + "</p>";
}
document.getElementById("myDict").innerHTML = dictHTML;
</script>
</body>
</html>
```
在这个示例中,我们使用了 `ul` 元素来展示一个列表,使用 `div` 元素来展示一个字典。我们使用 JavaScript 创建了一个名为 `myList` 的列表和一个名为 `myDict` 的字典,并将它们写入到网页中。对于列表,我们使用了一个 `for` 循环来遍历列表中的每个元素,并将它们包装在 `li` 标签中,最后将整个列表作为 HTML 写入到 `myList` 元素中。对于字典,我们使用了一个 `for...in` 循环来遍历字典中的每个键值对,并将它们包装在 `p` 标签中,最后将整个字典作为 HTML 写入到 `myDict` 元素中。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)