body.innerHTML изменяет содержимое body
все обработчики событий внутренних элементов затираются
insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию.
Данная функция не переписывает имеющиеся элементы, что предовращает дополнительную серелизацию и поэтому работает быстрее, чем манипуляции с innerHTML.
Синтаксис
element.insertAdjacentHTML(position, text);
position указывает положение element, и может принимать одно из следующих значений:
'beforebegin'
Перед element .
'afterbegin'
Внутри element, перед первым дочерним элементом (потомком).
'beforeend'
Внутри element, после последнего дочернего элемента.
'afterend'
После element.
text строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.