Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как правильно добавлять элементы в DOM (https://javascript.ru/forum/events/83165-kak-pravilno-dobavlyat-ehlementy-v-dom.html)

finlolo 05.10.2021 21:43

Как правильно добавлять элементы в DOM
 
Подскажите, пожалуйста, как правильно добавлять элементы в дом и в чем отличие.

Например я могу добавить новый элемент с помощью:
document.createElement('div');

далее добавить ему атрибут id, к примеру.

А могу сделать так:
document.querySelector('.myCustomDiv').innerHTML = '<div id="customDiv"></div>';


Если добавлю в код addEventlistner события клика, то у обоих новых элементов смогу отследить событие.

Собственно, в чем тогда разница?
И как правильнее делать?

Спасибо.

Vlasenko Fedor 05.10.2021 23:46

Мультивставка в учебнике

Aetae 05.10.2021 23:54

Разница в том, что ты не сможешь работать с элементами созданными через innerHTML не запросив и руками снова.

voraa 06.10.2021 07:02

Цитата:

Сообщение от finlolo
Например я могу добавить новый элемент с помощью:
document.createElement('div');

Нет. Так ничего не добавится.
Надо, что бы было эквивалентно нижнему варианту, так
const cd document.createElement('div');
cd.id = 'customDiv';
document.querySelector('.myCustomDiv').append(cd)

ksa 06.10.2021 09:04

Цитата:

Сообщение от finlolo
как правильно добавлять элементы в дом

Правильное добавление - это добавление не приводящее к ошибке и дающее нужный результат. :)
Вариантов модификации ДОМ достаточно много (см. учебник)
https://learn.javascript.ru/modifyin...d-before-after

Цитата:

Сообщение от finlolo
в чем отличие

Отличие может крыться в самих исходных данных, которые поступают для модификации ДОМа...
Исходя из полученных данных, разработчик выбирает более удобный вариант модификации ДОМ.

finlolo 06.10.2021 14:51

ksa,
Спасибо, работать-то работает)

Просто добавляя кусок верстки через innerHTML, я так понял, он не отслеживается уже js. По крайней мере jQuery не видит новые элементы. И обработчик приходится писать кидая событие клика на весь документ, а внутри него проверять по тому ли элементу кликнули.

Но через innerHTML, например, удобнее скомпоновать некоторое количество емких элементов, которые подгружаются динамически. Например, при выборе определенной категории отправляется запрос ajax, приходит массив данных, и данные из него через массив распихиваем по верстке. И присваиваем нужному блоку. И там появляются динамически, к примеру, превьюшки записей на сайте.

Вот и возник вопрос как нужно, а как НЕ нужно =)

finlolo 06.10.2021 14:52

Vlasenko Fedor,
спасибо, вроде как устаревший метод уже

Vlasenko Fedor 06.10.2021 15:06

finlolo,
Нет все работает insertAdjacentHTML один из оптимальных методов вставки
Внимательно читайте

ksa 06.10.2021 15:47

Цитата:

Сообщение от finlolo
Просто добавляя кусок верстки через innerHTML, я так понял, он не отслеживается уже js. По крайней мере jQuery не видит новые элементы. И обработчик приходится писать кидая событие клика на весь документ, а внутри него проверять по тому ли элементу кликнули.

Все равно как будешь добавлять новые элементы... На новых элементах не будет обработчиков. :no:

finlolo 06.10.2021 16:41

ksa,
Ну так, как я описал, правда работает. Я проверял :)


Часовой пояс GMT +3, время: 09:12.