JavaScript | Как генерировать HTML-разметку из объекта?

Есть объект:

var mashina = {
   brand: "Jeep",
   year:2050,
   model: "Kaffin",
   color: "Black",
   maxspeed: 170,
}

Нам нужно из этого объекта сгенерировать разметку. Как это сделать?

Можем написать функцию:

function carstr (x) {
   var h1 = `<h1>Автомобиль ${x.brand} ${x.model} ${x.year} год</h1>`;
   var brand = `<p>Производитель: ${x.brand}</p>`;
   var model = `<p>Модель: ${x.model}</p>`;
   var color = `<p>Цвет: ${x.color}</p>`;
   var year = `<p>Год выпуска: ${x.year}</p>`;
   return h1 + brand + model + color + year;
}

Вызовем функцию с нашим объектом. Данная функция вернёт нам строку, которая будет являться HTML-разметкой:

carstr(mashina)
"<h1>Автомобиль Jeep Kaffin 2050 год</h1><p>Производитель: Jeep</p><p>Модель: Kaffin</p><p>Цвет: Black</p><p>Год выпуска: 2050</p>"
Генерация HTML-разметки из объекта - JavaScript
Генерация HTML-разметки из объекта — JavaScript


Эту разметку можно добавить в любой элемент документа. Добавим в сам документ — в body:

document.write(carstr(mashina))
Разметка в документе - HTML
Разметка в документе — HTML

Информационные ссылки

JavaScript | Как генерировать HTML-разметку?

Поделись записью