Делегирование кликов в списке

Условие

Создать список, сформированный из массива строк. При нажатии на любой элемент списка в контейнере <div id="content"> должен выводиться соответствующий элемент массива.

Ответ

Создайте список и повесьте один обработчик на его контейнер. По ближайшему элементу списка определяйте индекс, а значение вставляйте в content через textContent.

function renderList(values, list, content) {
  list.replaceChildren(...values.map((value, index) => {
    const li = document.createElement('li');
    const button = document.createElement('button');
    button.type = 'button'; button.dataset.index = String(index);
    button.textContent = value; li.append(button); return li;
  }));
  const onClick = event => {
    const button = event.target.closest?.('button[data-index]');
    if (!button || !list.contains(button)) return;
    content.textContent = values[Number(button.dataset.index)];
  };
  list.addEventListener('click', onClick);
  return () => list.removeEventListener('click', onClick);
}

Передайте ul и document.getElementById('content'). Кнопка обеспечивает клавиатурную активацию; делегирование сохраняет один listener. Возвращённая функция снимает его при уничтожении списка. Текст не интерпретируется как HTML.