How to implement ajax loading of goods on pure js?

Question

JavaScript

For example, the page is loaded first, and a request is made to the server, and objects are inserted into the wrapper:

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

At the next request, insert like this?

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

Is this good practice?
Is it possible to put html code at the end of the div more elegantly?

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

Answer 1

Slowly, very, so it will be faster:

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

Quite normal practice.
If there are a lot of inserts, you need to use documentFragment for optimization