首页无序列表中显示不同的城市，编写代码添加城市，并显示在无序列表中。

无序列表中显示不同的城市，编写代码添加城市，并显示在无序列表中。

时间: 2024-10-20 22:10:48 浏览: 16

你可以使用HTML和JavaScript来创建一个简单的无序列表，动态地向其中添加城市名称。下面是一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>城市列表</title> <style> ul { list-style-type: none; padding: 0; } li { margin-bottom: 5px; } </style> </head> <body> <h2>城市列表</h2> <ul id="cityList"></ul> <button onclick="addCity()">添加城市</button> <script> function addCity() { var city = prompt("请输入新城市:"); if (city) { var cityList = document.getElementById('cityList'); var listItem = document.createElement('li'); listItem.textContent = city; cityList.appendChild(listItem); } } </script> </body> </html> ``` 在这个示例中，我们首先在HTML中创建了一个无序列表`<ul>`和一个按钮`<button>`。然后在JavaScript中定义了一个`addCity`函数，当点击按钮时会弹出提示框获取用户输入的城市名。如果用户输入了内容，函数会创建一个新的`<li>`元素并添加到列表中。

阅读全文