Как правильно добавлять элементы в DOM
Подскажите, пожалуйста, как правильно добавлять элементы в дом и в чем отличие.
Например я могу добавить новый элемент с помощью: document.createElement('div'); далее добавить ему атрибут id, к примеру. А могу сделать так: document.querySelector('.myCustomDiv').innerHTML = '<div id="customDiv"></div>'; Если добавлю в код addEventlistner события клика, то у обоих новых элементов смогу отследить событие. Собственно, в чем тогда разница? И как правильнее делать? Спасибо. |
Мультивставка в учебнике
|
Разница в том, что ты не сможешь работать с элементами созданными через innerHTML не запросив и руками снова.
|
Цитата:
Надо, что бы было эквивалентно нижнему варианту, так const cd document.createElement('div'); cd.id = 'customDiv'; document.querySelector('.myCustomDiv').append(cd) |
Цитата:
Вариантов модификации ДОМ достаточно много (см. учебник) https://learn.javascript.ru/modifyin...d-before-after Цитата:
Исходя из полученных данных, разработчик выбирает более удобный вариант модификации ДОМ. |
ksa,
Спасибо, работать-то работает) Просто добавляя кусок верстки через innerHTML, я так понял, он не отслеживается уже js. По крайней мере jQuery не видит новые элементы. И обработчик приходится писать кидая событие клика на весь документ, а внутри него проверять по тому ли элементу кликнули. Но через innerHTML, например, удобнее скомпоновать некоторое количество емких элементов, которые подгружаются динамически. Например, при выборе определенной категории отправляется запрос ajax, приходит массив данных, и данные из него через массив распихиваем по верстке. И присваиваем нужному блоку. И там появляются динамически, к примеру, превьюшки записей на сайте. Вот и возник вопрос как нужно, а как НЕ нужно =) |
Vlasenko Fedor,
спасибо, вроде как устаревший метод уже |
finlolo,
Нет все работает insertAdjacentHTML один из оптимальных методов вставки Внимательно читайте |
Цитата:
|
ksa,
Ну так, как я описал, правда работает. Я проверял :) |
Часовой пояс GMT +3, время: 09:12. |