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-разметку?