Estoy tratando de hacer una extensión de Chrome. Trato de crear un div y ponerlo en la parte superior de mi ventana emergente de notificaciones en youtube que abrimos haciendo clic en este botón .
Entonces trato de atrapar al primer hijo de mi contenedor y hacer un insertBefore. Pero tengo un problema: no puedo obtener el elemento firstChild de mi contenedor, o siempre es nulo.
Intento este código, pero no sé si es la buena manera:
const notificationsContainer = document.querySelector("#container > #sections"); notificationsContainer.style.backgroundColor = "blue"; //to view my container /* Creation of my new div */ let newDiv = document.createElement("div"); newDiv.style.backgroundColor = "green"; newDiv.style.height = "50px"; newDiv.style.width = "50px"; newDiv.style.top = "0"; /* Insert my newDiv */ let parentElement = document.querySelector("#items"); let childElement = parentElement.firstChild; parentElement.insertBefore(newDiv, childElement);Esto es cuando imprimo mi parentElement y childElement en la consola (están vacíos): consola de impresión
Gracias por tu ayuda !
PD : estoy tratando de recibir mis notificaciones, así que las elimino con js, si conoces una mejor manera, me encantaría escucharla.
Editar: aquí una captura de pantalla del inspector se enfoca en los elementos seleccionados.
¿Está seguro de que el elemento al que se dirige tiene un elemento secundario? Si no es así, .firstChild devolverá nulo.
Puede haber un problema con el tiempo. El elemento está vacío cuando lo agarra y se llena después de eso.
Tal vez necesites esperar "algún tiempo".
Intente tomar item después de un par de segundos configurando el tiempo de espera ( setTimeout ).
