Как подгружать большие html данные?

Question

[Max Ba]

На сайте, у товаров, есть кнопка "подробнее" Она отправляет id в ajax.php. Тот возвращает json. Большой, массивный объект с множеством вложенностей.
Следовательно, все эти свойства надо подставить в множество элементов html в затем в <div id="div1"></div> .

Тк ajax может вернуть, только json, то приходится конкатенацией собирать html.

var r = '<div>Название: ' + data.name + '</div>';
r += '<div>Артикул: ' + data.article + '</div>';
r += '<div>Цена: ' + data.price + '</div>';
///... ещё строк 100 кода, включая циклы.
$("#div1").html(r);

Это верное решение или есть более оптимальные способы?
Не уверен, что тут конкатенация уместна.

Answer 1

[WapSter]

let r = `<div>Название: ${data.name}</div>
   <div>Артикул: ${data.article}</div>
   <div>Цена: ${data.price}</div>`;

es6

Comments

[Max Ba]

то есть в любом случае собирается в переменную, без всякий createElement?

[WapSter]

Max Ba, ну это зависит от выбранного способа. По факту то все равно передается строка даже если через createElement делать. Можно например так

let box = document.createElement('div');
box.innerHTML = 'Какая-то строка'
document.querySelecrot('#div1').append(box);

[Max Ba]

WapSter, спасибо