golden_yuna, существует 2 способа "привязать" что-либо к элементу в разметке:
1. используюя аттрибуты html элемента
2. используя св-ва DOM объекта
подробнее
здесь
Как ты могла заметить, атрибуты весьма удобны ввиду своей наглядности.
Однако, на практике так никто не делает, просто потому, что у тебя функция display() лежит в глобале (window). Конечно, можно и так залепить window.foo.display(), но все равно ты упрешся в то, что тебе нужен шаблонизатор для работы с разметкой.
Допустим, ты заюзаешь любой из множества шаблонизаторов и поймешь, что это действтительно удобно. После этого ты столкнешься с необходимостью биндить обработчики событий, не пробрасывая их в глобал + тебе потребуется условный рендеринг + динамическая привязка данных и т.д.
Т.о., если ты интересуешься в учебных целях, см. первый абзац.
Если тебе нужно "запилить" приложение/компонент, как правило, исопльзуют библиотеки/фреймворки. Пример с импользованием библиотеки vue.js
https://jsfiddle.net/he4gw9nh/1/ Нетрудно заметить, что количество кода для реализации простой задачи? сокращается в разы (за счет декларативности и реактивности).