Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.10.2021, 22:43
Аватар для finlolo
Аспирант
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 61

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

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

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

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


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

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

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2021, 00:46
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Мультивставка в учебнике
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2021, 00:54
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,470

Разница в том, что ты не сможешь работать с элементами созданными через innerHTML не запросив и руками снова.
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 06.10.2021, 08:02
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Сообщение от finlolo
Например я могу добавить новый элемент с помощью:
document.createElement('div');
Нет. Так ничего не добавится.
Надо, что бы было эквивалентно нижнему варианту, так
const cd document.createElement('div');
cd.id = 'customDiv';
document.querySelector('.myCustomDiv').append(cd)
Ответить с цитированием
  #5 (permalink)  
Старый 06.10.2021, 10:04
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,109

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

Сообщение от finlolo
в чем отличие
Отличие может крыться в самих исходных данных, которые поступают для модификации ДОМа...
Исходя из полученных данных, разработчик выбирает более удобный вариант модификации ДОМ.
Ответить с цитированием
  #6 (permalink)  
Старый 06.10.2021, 15:51
Аватар для finlolo
Аспирант
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 61

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

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

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

Вот и возник вопрос как нужно, а как НЕ нужно =)
Ответить с цитированием
  #7 (permalink)  
Старый 06.10.2021, 15:52
Аватар для finlolo
Аспирант
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 61

Vlasenko Fedor,
спасибо, вроде как устаревший метод уже
Ответить с цитированием
  #8 (permalink)  
Старый 06.10.2021, 16:06
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

finlolo,
Нет все работает insertAdjacentHTML один из оптимальных методов вставки
Внимательно читайте
Ответить с цитированием
  #9 (permalink)  
Старый 06.10.2021, 16:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,109

Сообщение от finlolo
Просто добавляя кусок верстки через innerHTML, я так понял, он не отслеживается уже js. По крайней мере jQuery не видит новые элементы. И обработчик приходится писать кидая событие клика на весь документ, а внутри него проверять по тому ли элементу кликнули.
Все равно как будешь добавлять новые элементы... На новых элементах не будет обработчиков.
Ответить с цитированием
  #10 (permalink)  
Старый 06.10.2021, 17:41
Аватар для finlolo
Аспирант
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 61

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно сделать бесконечный скролл с автоматической загрузкой контента (React.j darktowerk56c Элементы интерфейса 1 07.10.2019 16:56
Как правильно реализовать следующую анимацию на React? gsdev99 Элементы интерфейса 0 23.03.2019 08:50
Как правильно искать элементы в DOM и записывать результаты в массив? MouseOver Events/DOM/Window 8 25.10.2016 13:36
Json и как его правильно кушать (Help plz!) JohnyVoo Angular.js 2 04.05.2016 20:55
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14