Creating html tags inside html tags using javaScript?
Question
I'm trying to show data read from a JSON file onto HTML page using javaScript. I'm using following code -
<!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>
By using javaScript I want to create multiple div tags inside div tag under body with id=myData. For example - I want to have
<div id="myData">
<div></div> <!-- This for name from JSON file -->
<div></div> <!-- This for city from JSON file -->
</div>
I've tried multiple methods but none is working. Any help??
3 answers
solution1
3 ACCPTED 2020-12-19 06:41:18
Do you want something like this?
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);
You can then style the wrapper class with flexbox according to your preference.
solution2
1 2020-12-19 06:47:43
You can try changing the innerHTML of the parent div element. For example:
document.querySelector('#myData').innerHTML = `<div>${name}</div> <div>${city}</div>`;
Or, if you already have the div tags in your myData div element, then you can assign each div an id and then edit it from there.
document.querySelector('#name').innerText = 'Name'; document.querySelector('#city').innerText = 'City';
Another way may be:
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);
solution3
1 2020-12-19 06:49:23
Making new div elements and appending can be available.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.