Создание элементов в java Script

И так про создание элементов:

1) создавать элементы при помощи html, скрывать их, затем при необходимости отображать.

преимущества - легкая реализация не зависимо от сложности формы.

недостатки - при повторном применении - дублирование кода.

2) создавать элементы при помощи createElement, вставлять их в элементы при необходимости

преимущества -удобно добавлять, динамически в любое нужное место. возможность повторного использования

недостатки - создание сложных элементов громоздкое.

3) размещать при помощи innerHTML - вполне реализуемо (можно использовать шаблонные строки '<input type='text' value='${valiable}'/>' ). но страдает производительность. как альтернатива - element.insertAdjacentHTML(position, textHTML) - более производительный метод ( без дополнительно сериализации.)

преимущества - простота использования, можно переиспользовать

недостатки - при вставке простого текста не рекоммендуют использовать из соображений безопасности

4) React/Vue - работа с шаблонами на более высоком уровне(абстрагируются от всех вышеперечисленных методов хотя под капотом их и используют), дают много возможностей для создания шаблонов, переиспользования кода

преимущества - вышесказанное + большое количество готовых решений, возможность тестирования уже на более высоком уровне, активное использование на большинстве современных проектов

недостатки - тянут с собой много лишнего. думаю что не совсем подойдут для совсем уж простых страниц/сайтов. у новичков могут вызывать много вопросов в понимании происходящего. требуют знания и понимания js + основ функционального программирования

все это достаточно в общем написано, но думаю что общую идею донес.

Можно воспользоваться HTML5 элементом <template> и его API.

// Получаем шаблон. Переменная t будет содержать 
// найденный элемент <template> и являться объектом 
// класса HTMLElement. 
var t = document.querySelector('#productrow'); 
 
 
// Получаем тело таблицы (место, куда будем вставлять новые строки) 
var tb = document.querySelector("tbody"); 
 
// Из свойства content объекта t получаем представление того, что 
// будем вставлять в таблицу в виде DocumentFragment 
var clone = document.importNode(t.content, true); 
 
// Теперь получаем все ячейки вставляемой строки и наполняем их контентом 
var td = clone.querySelectorAll("td"); 
td[0].textContent = "1235646565"; 
td[1].textContent = "Stuff"; 
 
// В тело таблицы вставляем "клона", то есть уже наполненный шаблон 
tb.appendChild(clone); 
 
// Операцию можно повторять сколько угодно раз 
var clone2 = document.importNode(t.content, true); 
td = clone2.querySelectorAll("td"); 
td[0].textContent = "0384928528"; 
td[1].textContent = "Acme Kidney Beans 2"; 
 
tb.appendChild(clone2);

<table id="producttable"> 
  <thead> 
    <tr> 
      <td>UPC_Code</td> 
      <td>Product_Name</td> 
    </tr> 
  </thead> 
  <tbody> 
    <!-- existing data could optionally be included here --> 
  </tbody> 
</table> 
 
<template id="productrow"> 
  <tr> 
    <td class="record"></td> 
    <td></td> 
  </tr> 
</template>

Пример выше является адаптированным примером с MDN (ссылка вверху). Аналогично можно составить шаблон (template) для всплывающего окна и открывать (показывать) это окно только при каких-нибудь событиях. Например, при нажатии на кнопку.

Преимущество такого подхода, очевидно, заключается в том, что с представлением вы работаете непосредственно в HTML и его не приходится тянуть в логику (а разделение - это хорошо), а вот уже за наполнение шаблона динамическим контентом отвечает JS (конечно, статические данные разумным будет прямо в шаблоне и прописывать). Плюс, очевидно, переиспользование кода. Создали шаблон для всплывающего окна один раз, а вставляете его на страницу как хотите и когда хотите сколько угодно раз.