HTML-шаблонизаторы

Известные шаблонизаторы

• PUG
• handlebarsjs
• oadash.template
• EJS

Как создавать разметку с помощью js.

const p = document.createElement('p');
document.body.appendChild(p);

Это программируемые куски html-кода, которые могут инжектится в DOM-дерево через JS. Они упрощают создание разметки через JS, чтобы не городить большой js-код c помощью функции document.createElement()

<div class='{{wrapperClassName}}'>
  <div class='chat__button'>
    <button class='button'>
      <span>{{buttonText}}</span>
    </button>
  </div>

  <ul class='{{chatListClassName}}'>
    {{chatListItems}}
  </ul>
</div>