Создание тегов html внутри тегов html с использованием javaScript?

Я пытаюсь показать данные, считанные из файла JSON, на HTML-страницу с помощью javaScript. Я использую следующий код -

<!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.info('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, я хочу создать несколько тегов div внутри тега div под телом с id = myData. Например - я хочу иметь

<div id = "myData">
     <div></div>         <!-- This for name from JSON file -->
     <div></div>         <!-- This for city from JSON file -->
</div>

Я пробовал несколько методов, но ни один из них не работает. Любая помощь??

Что не работает? Каков результат после выполнения «appendData»?

— 19.12.2020 07:39

javascript html

19.12.2020 07:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы хотите что-то вроде этого?

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 в соответствии с вашими предпочтениями.

19.12.2020 07:41

Вы можете попробовать изменить innerHTML родительского элемента div. Например:

document.querySelector('#myData').innerHTML = `<div>${name}</div> <div>${city}</div>`;

Или, если у вас уже есть теги div в вашем элементе myData div, вы можете назначить каждому div идентификатор, а затем отредактировать его оттуда.

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

19.12.2020 07:47

Создание новых элементов 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>

19.12.2020 07:49

Другие вопросы по теме

Анимированные полосы меньше

Получение дочернего элемента в дереве DOM через querySelector

Перевернуть карту обратно при нажатии на другую карту с помощью CSS

Как удалить разрыв строки, созданный с помощью <ion-fab-button>

Использование селектора CSS «+» для братьев и сестер не работает

Как веб-браузер выбирает точку входа среди файлов, которые он получает с сервера?

Показать содержимое динамически созданного складного

Является ли обычной практикой иметь строку, содержащую большой DIV, и вводить ее в html с помощью JS?

Удаление белых линий в табличном элементе

Javascript с использованием getElementByClassName для изменения цвета кнопки

Создание тегов html внутри тегов html с использованием javaScript?

Ответы 3

Другие вопросы по теме

Похожие вопросы