addEventListener programmatically is null

var button = document.createElement("button");
button.type = "button";

button.className = "button";
button.innerText = "OK";
button.addEventListener("click", function () {
    console.log("Hello!");
}, false);

When I do this, the button never gets that event listener. I've tried attachEvent, button.onclick, and nothing seems to work. The button shows up fine with the class and text.

EDIT: So basically what I'm trying to do is programmatically show a "popup" array of divs.

Here is a screenshot of what it looks like: https://i.sstatic.net/98VLx.png, and I set it up like this: var x = new JMTK.Custom.MessageDialog(), then to add a popup, I just type x.addMessage({template: {type: JMTK.Custom.MessageDialog.templates.alert, title: "Alert title", message: "This is a message here", button1: {text: "Hello"}}})

This is the addMessage():

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML

which calls this function:

alert: function (template, element) {
    //Array of functions
    var callbacks = MessageDialogClass.callbacks;

    var alert = document.createElement("div");
    var id = Date.now();
    alert.id = id;
                
    var header = document.createElement("h1");
    header.innerText = (template.title ? template.title : "ALERT");

    var paragraph = document.createElement("p");
    paragraph.innerText = (template.message ? template.message : "No message specified")

    var button = document.createElement("button");
    button.type = "button";

    button.className = "button";
    button.innerText = (template.button1.text ? template.button1.text : "OK");
    button.addEventListener("click", function () {
        if (template.button1.callback) {
            template.button1.callback();
        }

        //MessageDialogClass.popElement(id);
        //delete callbacks.id;
    }, false);

    alert.appendChild(header);
    alert.appendChild(paragraph);
    alert.appendChild(button);

    callbacks.id = alert;

    return alert;
},

But again, when I click on the button, nothing happens, and in the DOM Explorer there is no onclick attribute.

Solution

The issue was that I was creating a div in my 'alert' template, and then setting the innerHTML of another div to that div. So it wouldn't allow me to set the event listener because it wasn't part of the DOM.

So instead of doing

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML

I just did

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML

because alert is returning a div already. So yeah, it had to do with setting the innerHTML rather than just setting it equal to the DOM node.