Как правильно добавлять элементы в DOM

[finlolo]

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

Например я могу добавить новый элемент с помощью:

document.createElement('div');

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

А могу сделать так:

document.querySelector('.myCustomDiv').innerHTML = '<div id="customDiv"></div>';

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

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

Спасибо.

[Vlasenko Fedor]

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

[Aetae]

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

[voraa]

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

Нет. Так ничего не добавится.
Надо, что бы было эквивалентно нижнему варианту, так

const cd document.createElement('div');
cd.id = 'customDiv';
document.querySelector('.myCustomDiv').append(cd)

[ksa]

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

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

в чем отличие

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

[finlolo]

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

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

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

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

[finlolo]

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

[Vlasenko Fedor]

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

[ksa]

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

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

[finlolo]

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