js modules: newly created HTML-Element appears how it should. But doesnt have the assigned EventListener

i use modules for this work.it is supposed to become a programm, where you can create and learn virtual vocabulary cards.

this is my main.js:

import {Mainmenu} from "./aggregator.js";

let mainmenu = new Mainmenu();
mainmenu.start();

mainmenu.start() creates the html basis of my page:

start() {
        let _body = document.querySelector("body");
        _body.insertAdjacentElement("afterbegin" , this.createMainmenu());
        _body.insertAdjacentElement("beforeend" , this.createHomeButton());
    }

createMainMenu creates two Buttons, of which one gets an EventListener:

mainmenu.createMainmenu():

[...]
let _mFrameButtonEditVokabs = document.createElement("button");
                _mFrameButtonEditVokabs.setAttribute("id" , "mFrameButtonEditVokabs");
                _mFrameButtonEditVokabs.innerText = "Sets bearbeiten";
                _mFrameButtonEditVokabs.addEventListener("click" , (e) => {
                    try {
                        _toggleFrame.erstelleToggleFrame();
                    }
                    catch {
                        let _toggleFrame = new Toggleframe();
                        _toggleFrame.erstelleToggleFrame();
                    }
                    e.target.classList.toggle("buttonsClicked");
                    setTimeout(() => e.target.classList.toggle("buttonsClicked"), 300);
                    _masterFrame.style.transform = "translateX(-50%)";

                    document.getElementById("homeButton").style.transform = "translateX(200%)";
                });

            _main.insertAdjacentElement("afterbegin" , _mFrameButtonLearnVokabs);
            _main.insertAdjacentElement("beforeend" , _mFrameButtonEditVokabs);

        _mainFrame.insertAdjacentElement("afterbegin" , _header);
        _mainFrame.insertAdjacentElement("beforeend" , _main);

        let _toggleFrame = document.createElement("div");
        _toggleFrame.setAttribute("id" , "toggleFrame");

        _masterFrame.insertAdjacentElement("afterbegin" , _mainFrame);
        _mainFrame.insertAdjacentElement("afterend" , _toggleFrame);

        return _masterFrame;

AND THIS WORKS PERFECTLY FINE. I get my button, it gets its eventListener AND THE LISTENER WORKS.

Now comes the fun part, that makes me rethink my choices of becoming a programmer:

I also create a homeButton WITH EXACT THE SAME TECHNIQUE, BUT IT HAS NO EVENTLISTENER!!

mainmenu.createHomeButton() creates the Homebutton:

mainmenu.createHomeButton():

createHomeButton() {
        let _homeButton = document.createElement("div");
        _homeButton.setAttribute("id" , "homeButton");
        _homeButton.addEventListener("click" , () => {
            console.log("Home wurde geklickt");
        });
        return _homeButton;
    }

Two HTML Elements, the same kind of creating them, setting their attributes and setting an Eventlistener. The first one works, the other one doesnt. Why?