如何用JavaScript在指定HTML标签内嵌套创建标签并展示JSON数据？

我明白你的需求啦——原来的代码是把每个条目的name和city放在同一个div里，现在你想给每个字段单独生成一个div来展示对吧？其实只需要修改appendData函数，在每次循环里创建两个div分别对应name和city就行，我帮你调整了代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON Test</title>
</head>
<body>
    <div id="myData"></div>
    <script>
        fetch('people.json')
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data);
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });

        function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                // 创建显示姓名的div
                var nameDiv = document.createElement("div");
                nameDiv.innerHTML = 'Name: ' + data[i].name;
                mainContainer.appendChild(nameDiv);
                
                // 创建显示城市的div
                var cityDiv = document.createElement("div");
                cityDiv.innerHTML = 'City: ' + data[i].city;
                mainContainer.appendChild(cityDiv);
            }
        }
    </script>
</body>
</html>

关键修改说明 #

• 保持fetch获取JSON的逻辑不变，这部分是正常工作的
• 在appendData的循环中，我们为每个数据项生成两个独立的div：
  • 第一个div专门承载姓名信息
  • 第二个div专门承载城市信息
  • 最后将两个div依次添加到myData容器内

确认你的JSON格式 #

确保people.json是正确的数组结构，每个元素包含name和city字段，示例如下：

[
    {"name": "Gagan Ghotra", "city": "Delhi"},
    {"name": "Jane Doe", "city": "London"}
]

这样运行后，myData容器里就会生成你想要的结构：每个姓名和城市各占一个独立的div啦。

内容的提问来源于stack exchange，提问作者Gagan Ghotra