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??

What is not working? What's the output after you execute the 'appendData'? — Toxnyc
– Toxnyc, Commented Dec 19, 2020 at 6:39

Ozgur Sar · Accepted Answer · 2020-12-19 06:41:18Z

3

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.

answered Dec 19, 2020 at 6:41

Ozgur Sar

2,2422 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AryanJassal · Accepted Answer · 2020-12-19 06:47:43Z

1

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);

answered Dec 19, 2020 at 6:47

AryanJassal

314 bronze badges

Comments

jacobkim · Accepted Answer · 2020-12-19 06:49:23Z

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>

Collectives™ on Stack Overflow

Creating html tags inside html tags using javaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related