An empty popup div is already displayed on the page. When a user clicks on an image, a new div is created and inserted into the popup. I am searching for an event that can detect when the appendChild operation is completed:
let galerieImages = document.getElementsByClassName("field-galerie-image");
let galeriePopup = document.getElementById("galerie-popup");
for(let i = 0; i < galerieImages.length; i++) {
galerieImages[i].addEventListener("click", function(e) {
e.preventDefault();
let popup = document.createElement("div");
popup.innerHTML = galerieImages[i].nextElementSibling.innerHTML;
galeriePopup.appendChild(popup);
popup.addEventListener("load", function(e) {
console.log("popup loaded");
})
};
In this code snippet, it appears that the load event does not work effectively with the appendChild method.
Are there any other events that can be used after appending a child element?
PS: All functionalities are functioning correctly until the point of defining popup.addEventListener.
EDIT:
Using the MutationObserver function could be a more suitable option, but I opted for the setTimeout alternative to maintain simplicity and conciseness in my code for this specific requirement.
I plan to explore the MutationObserver feature in the near future for further enhancements.