如何将新服务器添加到带有文本和按钮的列表中？

<input type="text" id="serverName" placeholder="服务器名称">
<input type="text" id="serverIP" placeholder="服务器IP地址">
<button id="addServerBtn">添加服务器</button>
<ul id="serverList"></ul>

// 获取页面元素
const serverNameInput = document.getElementById('serverName');
const serverIPInput = document.getElementById('serverIP');
const addServerBtn = document.getElementById('addServerBtn');
const serverList = document.getElementById('serverList');

// 定义服务器列表
const servers = [];

// 添加服务器按钮点击事件处理程序
addServerBtn.addEventListener('click', function() {
  // 获取服务器信息
  const serverName = serverNameInput.value;
  const serverIP = serverIPInput.value;

  // 创建新的列表项元素
  const listItem = document.createElement('li');
  listItem.textContent = `${serverName} - ${serverIP}`;

  // 创建删除按钮
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '删除';
  deleteBtn.addEventListener('click', function() {
    // 从服务器列表中移除该服务器
    const index = servers.indexOf(server);
    if (index > -1) {
      servers.splice(index, 1);
    }

    // 从DOM中移除该列表项
    listItem.remove();
  });

  // 将删除按钮添加到列表项中
  listItem.appendChild(deleteBtn);

  // 将列表项添加到服务器列表中
  serverList.appendChild(listItem);

  // 创建服务器对象
  const server = {
    name: serverName,
    ip: serverIP
  };

  // 将服务器对象添加到服务器列表中
  servers.push(server);

  // 清空输入框
  serverNameInput.value = '';
  serverIPInput.value = '';
});