Как правильно вставлять в DOM c помощью js?

Question

[kirillleogky]

При вставке в dom использовал такой код:

export default function addHtml(objWords) {
  const htmlBody = document.querySelector('body');

  htmlBody.insertAdjacentHTML('afterbegin', '<div id="prldr"><div class="contpre"><span class="svg_anm"></span></div></div><div class="wrapper"><header class="header_block" id="head"></header><main class="main_block" id="main"></main></div>');

  const navigationMenuBlock = document.createElement('nav');
  navigationMenuBlock.classList.add('navigation_menu_block');
  navigationMenuBlock.innerHTML = `<div id="pre"><div class="cont"></div></div>`;

В коментах написали:

делать так неправильно. Нужно делать темплейт и его вставлять. Так допустимо делать, если темплей очень сложный и создается в циклах либо при помощи lodash

плохой вариант вставлять с помощью innerHTML

Подскажите что за темплейт и как вставлять 'правильно' в dom элементы?

Answer 1

[Юрий Костин]

Попробуйте взглянуть на это: https://jsfiddle.net/z5gacj4s/2/