Я часто использую шаблонные литералы для этого, создавая длинную строку HTML с помощью оператора += и затем используя document.innerHTML, чтобы добавить окончательную строку HTML на мою страницу.
Простой пример может выглядетькак это:
const helloWorlds = {
spanish: '¡Hola Mundo!',
polish: 'Witaj świecie!',
french: 'Bonjour le monde!'
}
const helloWorldsKeys = Object.keys(helloWorlds);
let listMarkup = '';
for (let i = 0; i < helloWorldsKeys.length; i++) {
listMarkup += '<li class="listItem">' + helloWorlds[helloWorldsKeys[i]] + '</li>';
}
const myList = document.getElementById("list");
myList.innerHTML = listMarkup;
<div>
<h1>Hello World!</h1>
<ul id="list"></ul>
</div>
Конечно, вы также можете использовать appendChild для построения списка по битам в клиенте, вместо того, чтобы добавлять весь список сразу.Это может выглядеть так:
const myList = document.getElementById("list");
const helloWorlds = {
spanish: '¡Hola Mundo!',
polish: 'Witaj świecie!',
french: 'Bonjour le monde!'
}
const helloWorldsKeys = Object.keys(helloWorlds);
for (let i = 0; i < helloWorldsKeys.length; i++) {
let listItem = document.createElement('li');
listItem.classList.add('listItem');
listItem.innerHTML = helloWorlds[helloWorldsKeys[i]];
myList.appendChild(listItem);
}
<div>
<h1>Hello World!</h1>
<ul id="list"></ul>
</div>
Вот пример использования таблицы:
const myTableBody = document.getElementById("my-table-body");
const helloWorlds = {
spanish: '¡Hola Mundo!',
polish: 'Witaj świecie!',
french: 'Bonjour le monde!'
}
const helloWorldsKeys = Object.keys(helloWorlds);
for (let i = 0; i < helloWorldsKeys.length; i++) {
// create a table row element
let tableRow = document.createElement('tr');
// create a table cell (td) element
let listItem = document.createElement('td');
listItem.classList.add('listItem');
// add content to table cell element
listItem.innerHTML = helloWorlds[helloWorldsKeys[i]];
// append table cell to table row
tableRow.appendChild(listItem);
// append table row to table body
myTableBody.appendChild(tableRow);
}
<table border="1">
<thead>
<td>Hello World!</td>
</thead>
<tbody id="my-table-body"></tbody>
</table>
Относительно вашего конкретного приложения, проверьте этот ответ, если вы хотите изучить создание HTML-документов и добавление их содержимого в другие документы HTMl: Невозможно добавить DOMэлемент к узлу DIV: Uncaught HierarchyRequestError: Не удалось выполнить 'appendChild' на 'узле'