Node.js 模块：新创建的 HTML-Element 以应有的方式出现。 但没有分配的 EventListener

Question

我使用模块来完成这项工作。它应该成为一个程序，您可以在其中创建和学习虚拟词汇卡。

这是我的 main.js：

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

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

mainmenu.start() 创建我的页面的 html 基础：

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

createMainMenu 创建两个 Button，其中一个获取一个 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;

这工作得非常好。 我得到了我的按钮，它得到了它的 eventListener 和 LISTENER WORKS。

现在有趣的部分来了，这让我重新考虑成为一名程序员的选择：

我还使用完全相同的技术创建了一个 homeButton，但它没有事件监听器！

mainmenu.createHomeButton() 创建主页按钮：

mainmenu.createHomeButton():

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

两个 HTML 元素，创建它们、设置它们的属性和设置事件监听器的方式相同。 第一个有效，另一个无效。 为什么？