有没有办法将数组列表中的项变成单独的按钮？

<ul id="button-list">
  <li id="item-1">Item 1</li>
  <li id="item-2">Item 2</li>
  <li id="item-3">Item 3</li>
</ul>

.button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

// 获取数组列表
const itemList = ['Item 1', 'Item 2', 'Item 3'];

// 获取按钮列表的父元素
const buttonList = document.getElementById('button-list');

// 遍历数组列表，创建按钮并添加到HTML中
itemList.forEach((item, index) => {
  // 创建按钮元素
  const button = document.createElement('button');
  
  // 设置按钮文本
  button.innerText = item;
  
  // 添加样式类
  button.classList.add('button');
  
  // 添加点击事件处理函数
  button.addEventListener('click', () => {
    console.log(`Button ${index + 1} clicked!`);
  });
  
  // 将按钮添加到父元素中
  buttonList.appendChild(button);
});