[英]Creating html tags inside html tags using javaScript?
我正在嘗試使用 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 設置包裝器 class 的樣式。
您可以嘗試更改父 div 元素的innerHTML
。 例如:
document.querySelector('#myData').innerHTML = `<div>${name}</div> <div>${city}</div>`;
或者,如果您的myData
div 元素中已經有 div 標簽,那么您可以為每個 div 分配一個 id,然后從那里編輯它。
document.querySelector('#name').innerText = 'Name'; document.querySelector('#city').innerText = 'City';
另一種方式可能是:
div1 = document.createElement('div'); div1.textContent = 'name'; div2 = document.createElement('div'); div2.textContent = 'city'; const myData = document.querySelector('#myData'); myData.append(div1); myData.append(div2);
可以創建新的 div 元素和追加。
<body> <div id="myData"></div> <script> const data = [{name: 'json', city: 'city'}] appendData(data); function appendData(data) { var mainContainer = document.getElementById("myData"); for (var i = 0; i < data.length; i++) { var div = document.createElement("div"); let name = document.createElement("div"); let city = document.createElement("div"); name.innerHTML = 'Name: ' + data[i].name; city.innerHTML = ' ' + data[i].city; div.appendChild(name); div.appendChild(city); mainContainer.appendChild(div); } } </script> </body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.