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

my script dynamically writes html page. there buttons written want have onclick functions. please don't suggest frameworks jquery since javascript development course. assignment show know how create, read , delete cookies. script reads cookies , displays names , values delete button in table. far, delete cookie function isn't called @ when click of delete buttons. 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 = 0; < 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;     }