Existenz eines 'dynamisch' erzeugten Elements ermitteln

[Robert B.]

Moin znoerk,

ich bin in der Firma rausgedeutet worden eine Webanwendung mittels Javascript zu manipulieren und ziemlicher Neuling.

wo sagt man denn „rausgedeutet“?

Wie kann ich feststellen, ob die dynamisch erzeugten Elemente vorhanden sind ?

const e1 = document.querySelector('…');
if (e !== null) {
    // (mindestens ein) Element existiert
}

const es = document.querySelectorAll('…');
if (es.length > 0) {
    // (mindestens ein) Element existiert
}

So wie ich das verstehe bzw. eben vielleicht nicht, kann ich ja auf ein (noch) nicht vorhandenes Element keinen EventListener setzen.

Und vor allem: Was für ein Event möchtest Du denn beobachten?

Ich könnte ja auf das angeklickte/anzuklickende Element, das das Hinzufügen auslöst, einen EventListener('click') setzen. Aber der EventListener würde ja sofort feuern und es ist ja nicht gesagt, dass die 'neuen' Elemente da bereits ins DOM eingebaut worden sind, oder doch ?

Auch wenn es auf unserer Wikiseite über mehrere Eventlistener nicht steht, werden die entsprechend der Reihenfolge des Hinzufügens abgearbeitet. Dein Eventhandler wird also nach dem des fremden Skripts ausgeführt. Sofern der fremde Eventhandler nicht asynchron läuft, müssten die gewünschten DOM-Knoten bereits vorhanden sein, wenn Deiner ausgeführt wird.

Im Javascriptdebugger sehe ich, dass 'mein' Javascript nach Änderungen nicht neu geladen wurde/wird. Geänderte CSS-Dateien aber schon (wenn ich Firefox Strg+Shift+R mache um den Cache zu leeren). Woran liegt denn das ? Bzw. was mache ich da um meine Javascriptänderungen neu zu laden?

Verwendest Du spezielle Caching-Header? Ansonsten wechsel einmal in den Netzwerk-Tab in den Browser-Developer-Tools und deaktivere den Cache. Dann wird beim Neuladen wirklich alles noch einmal neu geladen.

Viele Grüße
Robert