Обработчик для созданного элемента дома

[Sergii Prudkii]

Всем бобра. Не могу разобраться в такой ситуации:
К каждому элементу списка добавляю элемент - кнопку

spanEl.insertAdjacentHTML("beforeEnd", `<button class='menuList' onclick="clickButMenu()"><p>ttt</p></button>`)

создал функцию clickButMenu

clickButMenu = function () {
      alert(this.innerHTML)
    }

Но при клике на кнопку ее содержимое не определено, в отличии если бы я написал так:

spanEl.insertAdjacentHTML("beforeEnd", `<button class='menuList' onclick="alert(this.innerHTML)"><p>ttt</p></button>`)

Почему не работает первый вариант и как правильно реализовать функцию ?

[Alexandroppolus]

Повесить онклик на родительский элемент, использовать делегирование

[j0hnik]

Sergii Prudkii,
потому что this в функции ссылается на window, чтобы работало его нужно передать аргументом

spanEl.insertAdjacentHTML("beforeEnd", `<button class='menuList' onclick="clickButMenu(this)"><p>ttt</p></button>`)
var clickButMenu = function (th) {
      alert(th.innerHTML)
    }

[Sergii Prudkii]

Огромнейшее тебе спасибо )