Как дождаться элемент на странице, чтобы к нему добавить новый используя createElement?

Question

[Aison]

Пожалуйста, на чистом js. Элементы я научился создавать, но никак не получается создать элемент с привязкой к классу. Чтобы он создавался в <div class="settings">

использую чтобы найти элемент document.querySelector(".settings"); и внутри него хочу создать кнопку, но это работает только на body. вот так document.querySelector("body");

пробовал использовать:

document.addEventListener('DOMContentLoaded', function(){

и даже

window.onload = function(){

но не работает, пишет в консоле об ошибке

Uncaught TypeError: Cannot read properties of null (reading 'append',

а на body работает. Понимаю, что элемент создаётся ещё до того как произойдёт загрузка страницы. Как решить?

Comments

[0xD34F]

не робит

"Не" что? Такого слова нет. Говори по-русски.

[Aison]

0xD34F, поправил

[Сергей Соколов]

из вопроса не понятно, чего ждём: загрузки просто статичного html, или там какое-нибудь React приложение, которое ещё тащит внешние данные, и только потом рендерит искомый элемент.

[Aison]

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

[Сергей Сергей]

(function f( s ) {
  const se = document.querySelector( s );
  if( se ) {
    // createElement
    // append
  }else{
    setTimeout( f, 500, s );
  }
})('div.settings');

[Aison]

Сергей Сергей, Это решение! Спасибо, всё сработало

Answer 1

[imko]

document.querySelector(".settings");
Ты должен писать селектор так же как в CSS, класс с точкой, айди с решеткой и так далее

Comments

[Aison]

это в примере так написано. я знаю это. поправил

полный код

document.addEventListener('DOMContentLoaded', function(){

    const arcg = document.querySelector(".Settings");

    const button = document.createElement("button");
    button.innerHTML = "Нажми";
    button.classList.add("btn-toggle");

    arcg.append(button);

/*
document.body.innerHTML = `
<ul class='ul'>
    <li></li>
</ul>
`*/
)};

ещё так попробовал

function sayHi() {
  arcg.append(button);
}

setTimeout(sayHi, 5000);
)};

не работает

[imko]

Aison, регистр

[Aison]

imko, одинаковый)) и в DOM и у меня в js
везде Settings.

я так-то это для сайта делаю через https://chrome.google.com/webstore/detail/user-jav...

у меня нету доступа к нему.

но не думаю что в этом проблема, проблема в работае самого сайта, то как он этот dom строит.

[imko]

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

[Aison]

imko, можно пожалуйста простой пример, а то не пойму как логику построить. у меня просто ещё и база по js сырая, я не полностью понимаю как он работает. строю пока из логики, чтобы решить текущею задачу

[imko]

Aison,

window.addEventListener('SettingsFound', function () {
	// делаешь что угодно
	// const arcg = document.querySelector(".Settings");
	// const button = document.createElement("button");
	// button.innerHTML = "Нажми";
	// button.classList.add("btn-toggle");
	// arcg.append(button);
})
let interval = setInterval(function () {
	if (document.querySelector(".Settings")) {
		window.dispatchEvent(new Event('SettingsFound'))
		clearInterval(interval)
	}
}, 500)

Ну суть примерно такая, вешаешься на эвент собственный, чекаешь есть ли на странице нужный элемент время от времени, если нашелся вызываешь эвент и снимаешь проверялку(интервал). А в слушателе эвента твой нужный код. Вообще есть вот такая вещь но тут нужно знать где у тебя появится твой .settings иначе слежка за всей страницей займет тонну ресурсов

[Aison]

imko, И это решение. Спасибо тебе! поможет в обучении

[imko]

Aison, на самом деле эвент тут не нужен, можешь свой код прям в тело if`а кидать, так просто красиво получается)