Не находится элемент на странице

@Дмитрий2003 · Регистрация: 19.04.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте. Ситуация такая: на странице есть кнопка, по нажатию на которую в html добавляется несколько новых тегов span с текстом (теги появляются, я проверял). Потом делаю поиск тегов span
let elem = document.querySelectorAll('span');

Старые теги находит, а новые нет. Что за фигня?

@Дмитрий2003 · 03.07.2025, 18:47 **[ТС]**

Сообщение от krvsa

начит на момент твоего запроса их просто нет в ДОМ.

Естественно. Что делать то?

@voraa · 03.07.2025, 18:51

Сообщение от Дмитрий2003

Естественно. Что делать то?

Ставить MutationObserver.
https://developer.mozilla.org/... onObserver
Следить, когда они появятся и только после этого делать все остальное.

@Дмитрий2003 · 03.07.2025, 18:54 **[ТС]**

Сообщение от krvsa

Значит на момент твоего запроса их просто нет в ДОМ.

Так и есть. Что делать с этим?

@black1385 · 03.07.2025, 19:17

Сообщение от Дмитрий2003

Что делать то?

Это я тебе в самом начале сказал, что делать.
Не находится элемент на странице

@voraa · 03.07.2025, 19:29

Сообщение от black1385

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

И как динамически создать скрипт после вставки элементов, если сначала надо определить в какой момент они вставляются?

@black1385 · 03.07.2025, 19:32

Сообщение от voraa

И как динамически создать скрипт после вставки элементов, если сначала надо определить в какой момент они вставляются?

После. Вначале вставка элементов. Потом создание js-скрипта. Пусть просто вставит мой код в консоль браузера и проверит. Увидит ли он новые элементы?

@voraa · 03.07.2025, 19:34

Сообщение от black1385

После. Вначале вставка элементов. Потом создание js-скрипта.

Всю тему прочитать не дано? Всего то меньше 2 страниц

Сообщение от Дмитрий2003

Я наверное не очень хорошо объяснил. Сайт не мой, я много с ним работаю и чтобы облегчить работу использую расширение браузера tampermonkey. Расширение внедряет на страницу мой собственный скрипт. Работает скрипт так: на странице создается кнопка, по нажатию на которой раскрывается список шаблонов, требуется кликнуть на определенном элементе списка. Списка изначально на странице нет, выводится скриптом. Кнопка работает, список раскрывается. Но дальше ничего не работает,....

Понял?
Какой то код, в который лезть нет никакой возможности вставляет в DOM элементы. И потом их надо находить. Т.е. надо поймать момент, когда этот неведомый код вставит элементы.
И зачем потом "динамически" создавать скрипт - никому, кроме тебя, непонятно. Потом достаточно вызвать функцию из скрипта, который создан в любое время раньше

@black1385 · 03.07.2025, 19:45

Сообщение от voraa

Понял?

Да хрень какая-то. Хоть сто раз почитаю, всё равно не пойму зачем это) Он же нашел возможность вставлять эти элементы на чужой сайт. Пусть найдет такую же возможность вставлять JS.

@voraa · 03.07.2025, 19:58

Сообщение от black1385

Он же нашел возможность вставлять эти элементы на чужой сайт. Пусть найдет такую же возможность вставлять JS.

Так расширения для того и делают, что бы работать с чужими сайтами. И вставлять скрипт после чего то не надо. После чего то надо просто вызвать свою функцию. Но сначала определить момент, когда нужные элементы появляются на сайте. Обычно такие вещи делаются с помощью MutationObserver.

Добавлено через 6 минут
Дмитрий2003,
Еще раз.
openTamplace - твоя функция? Что она делает? Она синхронная или асинхронная?
Если она асинхронная, то надо дожидаться, когда она завершит работу промисами или через async/await.

krvsa · 04.07.2025, 08:55

Сообщение от black1385

Вначале вставка элементов. Потом создание js-скрипта.

Ты все продолжаешь продвигать свою ахинею...

Сделать скрипт, который потом добавит другой скрипт. Это капец какое решение.

И самое главное не решена проблема "как узнать, что элементы уже появились"...

@black1385 · 04.07.2025, 09:26

krvsa, надо дождаться когда ТС всё-таки найдет правильное решение и вот потом посмотрим. Твои ответы также можно назвать ахинеей, потому что они тоже не работают по данному вопросу

krvsa · 04.07.2025, 10:12

black1385, ответ ТСу уже дан выше...

Сообщение от voraa

Ставить MutationObserver.
https://developer.mozilla.org/... onObserver
Следить, когда они появятся и только после этого делать все остальное.

@Дмитрий2003 · 06.07.2025, 21:36 **[ТС]**

MutationObserver сработал, но почему-то не сработал код:

JavaScript
1
2
3
4
5
 let btn = findElementByTagAndText('span', 'Нажать').parentNode.parentNode;
 
console.log("btn " + btn .outerHTML); // btn <button class="styled__ButtonStyled-sc-1ksaaok-5 eNmfJv uikit-button" disabled=""><div class="styled__Loading-sc-1ksaaok-0 hEVLTm uikit-button_loading"></div><div class="styled__ButtonContent-sc-1ksaaok-1 gKuoyW uikit-button_content"><span class="uikit-button_label">Нажать</span></div></button>
 
btn.click(); // никакой реакции

@voraa · 06.07.2025, 21:51

В девтулсе смотреть какие обработчики установлены на эту кнопку.
Смотреть по коду обработчиков не проверяют ли они истинное нажатие от программного.

@Дмитрий2003 · 06.07.2025, 21:54 **[ТС]**

А что толку смотреть? Я ведь не могу изменить код обработчиков.

@voraa · 06.07.2025, 22:00

Сообщение от Дмитрий2003

А что толку смотреть?

Смотреть всегда есть толк. Потому, что м.б. дело совсем не в этом (на самом деле такие проверки обычно вызваны бывают сильной паранойей и встречаются не часто). Просто ткнуть там точку останова и тупо смотреть, что происходит.

@Дмитрий2003 · 06.07.2025, 23:02 **[ТС]**

Я плохо разбираюсь в JavaScript. Не смогу понять что там происходит. Ладно, вам спасибо за помощь, на этом закончим.

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Дмитрий2003 0 / 0 / 0 Регистрация: 19.04.2013 Сообщений: 34

	Не находится элемент на странице 25.06.2025, 22:20. Показов 2114. Ответов 36 Метки нет (Все метки) Здравствуйте. Ситуация такая: на странице есть кнопка, по нажатию на которую в html добавляется несколько новых тегов span с текстом (теги появляются, я проверял). Потом делаю поиск тегов span let elem = document.querySelectorAll('span'); Старые теги находит, а новые нет. Что за фигня? 0

@black1385 Заблокирован
	04.07.2025, 09:26
	krvsa, надо дождаться когда ТС всё-таки найдет правильное решение и вот потом посмотрим. Твои ответы также можно назвать ахинеей, потому что они тоже не работают по данному вопросу 0

@voraa 1255 / 1184 / 179 Регистрация: 21.01.2024 Сообщений: 5,487
	06.07.2025, 21:51
	В девтулсе смотреть какие обработчики установлены на эту кнопку. Смотреть по коду обработчиков не проверяют ли они истинное нажатие от программного. 0

@Дмитрий2003 0 / 0 / 0 Регистрация: 19.04.2013 Сообщений: 34
	06.07.2025, 21:54 [ТС]
	А что толку смотреть? Я ведь не могу изменить код обработчиков. 0

@Дмитрий2003 0 / 0 / 0 Регистрация: 19.04.2013 Сообщений: 34
	06.07.2025, 23:02 [ТС]
	Я плохо разбираюсь в JavaScript. Не смогу понять что там происходит. Ладно, вам спасибо за помощь, на этом закончим. 0

Не находится элемент на странице

Решение