javascript - 使用javascript在html标签内创建html标签?
问题描述
我正在尝试使用 javaScript 将从 JSON 文件读取的数据显示到 HTML 页面上。我正在使用以下代码 -
<!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++) {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data[i].name + ' ' + data[i].city;
mainContainer.appendChild(div);
}
}
</script>
</body>
</html>
通过使用 javaScript,我想在 id=myData 的主体下的 div 标签内创建多个 div 标签。例如 - 我想要
<div id="myData">
<div></div> <!-- This for name from JSON file -->
<div></div> <!-- This for city from JSON file -->
</div>
我尝试了多种方法,但都没有奏效。有什么帮助吗??
解决方案
你想要这样的东西吗?
var div = document.createElement("div");
for (var i = 0; i < data.length; i++) {
div.innerHTML += `
<div class="wrapper">
<div>Name: ${data[i].name}</div>
<div>City: ${data[i].city}</div>
</div>`;
}
mainContainer.appendChild(div);
然后,您可以根据自己的喜好使用 flexbox 设置包装类的样式。
推荐阅读
- python - python:使用序列号编写 CSV 文件
- javascript - 如何通过转换使 div 在提交时消失?
- mysql - 存储多个值 MySQL
- android - android studio - 不需要的无限错误日志
- javascript - 根据元素获取数据
- html - 为什么我的整篇文章在 flex 容器中时会溢出它的边界?
- python - Pyspark 动态过滤数据框
- python - 有时即使循环任务结束,循环线程也会卡住而没有结束
- ios - 使用 init 实例化 UIViewController(来自解码器:解码器)
- mysql - 根据条件在 Spark SQL 或 MySQL 中生成新列