Небольшим контрастом к предыдущему посту, добавим микро-фреймворк для рисования HTML-контента. Поговорим о библиотеке jsRender. С её помощью, ты можешь сделать JS-шаблоны различных кнопок, таблиц, и других элементов интерфейса - а потом отрисовать их на чистом JS. Ну, это гораздо проще чем писать вот такие конструкции: htmloutput += "<div>Preved</div>";
Для начала, скачай файл jsRender.js с официального сайта проекта. После скачивания подключи его к своей странице HTML, используя тег <script>:
<script src="путь_к_файлу/jsRender.js"></script>
💡Создание своей HTML-разметки. Для начала создай шаблон, который определит структуру твоей разметки. Шаблон – это строка HTML-кода, где ты используешь специальные логические конструкции для вставки данных. Шаблоны представляют из себя скрипты, которые трансформируются в готовый HTML-код. Для такой трансформации тебе так же понадобится JSON - то есть, готовый набор данных для отрисовки.🧑💻 Пример простого шаблона jsRender. В этом примере шаблон содержит два маркера {{:title}} и {{:content}}, которые будут заменены соответствующими значениями при рендеринге.
<script id="myTemplate" type="text/x-jsrender">
<div>
<h2>{{:title}}</h2>
<p>{{:content}}</p>
</div>
</script>
📖 Используй его для создания HTML-разметки из JavaScript. Найди контейнер, в который ты хочешь добавить разметку, и затем вызови внутри JS-кода функцию render для отображения шаблона. Функция вернёт тебе готовый HTML-код, который ты сможешь добавить в любое место твоей веб-страницы.✅ Ссылка для подробного изучения:
Подробная статья
