how do i add functions to the events of dynamic elements in pure javascript?

Question

My script dynamically writes HTML into my page. There are buttons that are written that I want to have onclick functions. Please don't suggest frameworks like jQuery since this is for my JavaScript development course. The assignment was to show that we know how to create, read and delete cookies. This script reads all cookies and displays their names and values with a delete button in a table. So far, the delete cookie function isn't called at all when you click any of the delete buttons. Thanks for your time.

document.getElementById("showCookies").onclick = function(){

        var columnRight = document.getElementById('columnRight');

        var cookies = document.cookie;
        var cookiesContent = '<h1>Existing Cookies</h1>';
        console.log(cookies);
        cookies = cookies.split(";");

        if(cookies.length > 0){


            cookiesContent += '<table width="100%" cellspacing="1" cellpadding="10" border="0"> \
            <thead> \
                <tr> \
                    <th>Name</th> \
                    <th>Value</th> \
                    <th>Delete</th> \
                </tr> \
            </thead> \
            <tbody> \
                ';

            for(var i = 0; i < cookies.length; i++){

                cookieAtts = cookies[i].split('=');
                cookiesContent += "<tr> \
                    <td>" + cookieAtts[0] + "</td> \
                    <td>" + decodeURI(cookieAtts[1]) + '</td> \
                    <td><button onclick="deleteCookie(\'' + cookieAtts[0] + '\');">Delete</button></td> \
                </tr>';

            }

            cookiesContent += "</tbody></table>";

        }

        columnRight.innerHTML = cookiesContent;

        return false;

    }

    function deleteCookie(cookieName){
        alert("Hello!");
        return false;
    }