Как на чистом js реализуют ajax подгрузку товаров?

Question

[Алёша]

Например, сначала загружается страница, и идет запрос на сервер, и во враппер вставляются обьекты:

document.getElementsByClassName('wrapper')[0].innerHTML = this.responseText;

При следующем запросе вставлять так?

document.getElementsByClassName('wrapper')[0].innerHTML = document.getElementsByClassName('wrapper')[0].innerHTML +  this.responseText;

Это good practice?
Можно ли более элегантно вставлять в конец дива html код?

document.getElementsByClassName('wrapper')[0].innerHTML +  this.responseText;

Comments

[Сергей delphinpro]

Если речь просто о укороченном синтаксисе, то так

document.getElementsByClassName('wrapper')[0].innerHTML +=  this.responseText;

[Алёша]

Сергей, а добавлять же в конец элементы можно только innerHTML'ом? Искал в справочнике, не нашел.

[Сергей delphinpro]

Алексей Набережный, ну не совсем так
https://learn.javascript.ru/modifying-document
https://learn.javascript.ru/multi-insert

[Алёша]

Сергей, вы тут круглосуточно обитаете?

[Сергей delphinpro]

Алексей Набережный, вообще-то меня трое суток не было )

Answer 1

[RubaXa]

Медленно, очень, так будет быстрей:

const helper = document.createElement('div');
const wrapper = document.querySelector('.wrapper');

helper.innerHTML = this.responseText;
wrapper.appendChild(helper);

// Если нужно без лишнего div
let child;
let frag = document.createDocumentFragment()

while (child = helper.firstChild) {
   frag.appendChild(child);
}

wrapper.appendChild(frag);

Answer 2

[Павел Корнилов]

Вполне нормальная практика.

document.querySelector('.wrapper').innerHTML += this.responseText;

Если вставок много, нужно для оптимизации юзать documentFragment