如何使用向上键或向下键在动态填充的li元素之间导航

<ul id="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
</ul>

// 获取li元素列表
const liElements = document.querySelectorAll('.item');

// 设置初始选中的li元素索引
let selectedIndex = 0;

// 监听键盘按键事件
document.addEventListener('keydown', (event) => {
  // 按下向上键
  if (event.key === 'ArrowUp') {
    // 更新选中的li元素索引
    selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;
  }
  // 按下向下键
  else if (event.key === 'ArrowDown') {
    // 更新选中的li元素索引
    selectedIndex = selectedIndex < liElements.length - 1 ? selectedIndex + 1 : liElements.length - 1;
  }

  // 移除所有li元素的选中状态
  liElements.forEach((li) => {
    li.classList.remove('selected');
  });

  // 添加选中状态到当前选中的li元素
  liElements[selectedIndex].classList.add('selected');
});

.selected {
  background-color: yellow;
}