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

要将新服务器添加到带有文本和按钮的列表中，可以按照以下步骤进行：

创建一个服务器对象，包含服务器的相关信息，如名称、IP地址、操作系统等。
在前端页面中，使用HTML和CSS创建一个列表，可以使用<ul>和<li>标签来表示每个服务器的项。
使用JavaScript来处理服务器列表的更新。可以通过以下步骤实现：
a. 获取文本输入框中的服务器信息，如名称和IP地址。
b. 创建一个新的列表项元素，并将服务器信息添加到该元素中。
c. 创建一个按钮元素，并为其添加一个点击事件处理程序。
d. 在点击事件处理程序中，将新创建的列表项元素添加到服务器列表中。
在点击事件处理程序中，可以选择将服务器信息发送到后端进行处理，如保存到数据库或进行其他操作。

以下是一个示例代码：

HTML部分：

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

JavaScript部分：

// 获取页面元素
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 = '';
});

这样，当用户在文本输入框中输入服务器名称和IP地址，并点击"添加服务器"按钮时，新的服务器信息将被添加到带有文本和按钮的列表中。用户还可以通过点击每个服务器项后面的"删除"按钮来删除相应的服务器。