Tell me how to create bulky elements in JS more productively, for example, a pop-up window with input - do it through document.createElement or using innerHtml = '............' ???

  • one
    Of course, you can create elements via js, but it’s better to create the necessary block / element using html, and control the behavior via javascript - user192664
  • that is, do you mean, for example, create an element on the html page and hide it, and then js show and fill in fields, for example, from the database? right? - Kettle
  • Yes, you understood everything correctly. - Sergey Petrashko

2 answers 2

And so about the creation of elements:

1) create elements using html , hide them, then display if necessary.

advantages - easy implementation, regardless of the complexity of the form.

disadvantages - when reapplied - duplicate code.

2) create elements using createElement , insert them into elements if necessary

benefits — convenient to add, dynamically to any desired location. reusability

disadvantages - the creation of complex elements is cumbersome.

3) to place with innerHTML - quite realizable (you can use the template lines ' <input type='text' value='${valiable}'/> '). but performance suffers. alternatively, element.insertAdjacentHTML(position, textHTML) is a more efficient method (without additional serialization.)

benefits - ease of use, reusable

disadvantages - when inserting plain text they are not recommended for safety reasons

4) React / Vue - working with templates at a higher level (abstracting from all the above methods, although they are used under the hood), provide many opportunities for creating templates, reusing code

advantages - the above + a large number of ready-made solutions, the ability to test at a higher level, active use on most modern projects

disadvantages - they bring with them a lot of excess. I think that is not quite suitable for very very simple pages / sites. beginners can cause many questions in understanding what is happening. require knowledge and understanding of js + basics of functional programming

All this is written in general enough, but I think that the general idea has been reported.

  • Thanks for the answer, what you need. more understanding of how to accomplish tasks - Maker
  • React and Vue use the OOP Pradigm. And here functional programming? - Beast Winterwolf 1:56 pm
  • while just open, start reading the very first concepts in the textbook on the -HOK function, pure functions, higher order functions, immobility, side effects - that was certainly not part of the OOP. - Sergey Petrashko
  • Very strange. It seems that this is the fun of the author of the textbook. On the offsite tutorial about anything like that does not say. - Beast Winterwolf

You can use the HTML5 <template> element and its 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>

The example above is an adapted example with MDN (link above). Similarly, you can create a template (template) for a pop-up window and open (show) this window only for some events. For example, when you press a button.

The advantage of this approach, obviously, is that with the presentation you work directly in HTML and you don’t have to drag it into logic (and separation is good), but JS is responsible for filling the template with dynamic content (of course, static data will be reasonable right in the template and prescribe). Plus, obviously, reuse of the code. Created a template for a pop-up window once, and paste it on the page as you want and whenever you want as many times as you like.