HTML按钮上绑定方法，能够改变列表数据并渲染到HTML上

可以通过以下步骤来实现：

1. 在 HTML 中创建一个按钮元素，例如：

<button id="update-btn">更新列表</button>

2. 使用 JavaScript 获取该按钮元素，并给它添加一个点击事件处理函数，例如：

const updateBtn = document.getElementById('update-btn');
updateBtn.addEventListener('click', updateList);

其中，`updateList` 是一个将要绑定到按钮上的函数名称。

3. 在 `updateList` 函数中编写更新列表数据的逻辑，并将更新后的数据渲染到 HTML 上。例如：

function updateList() {
  // 假设列表数据存储在一个数组中
  const listData = ["apple", "banana", "cherry"];
  
  // 在这里可以对列表数据进行更新操作
  listData.push("durian");
  
  // 获取列表元素，清空原有内容
  const list = document.getElementById('list');
  list.innerHTML = '';
  
  // 遍历更新后的数据，将每个元素添加到列表中
  listData.forEach(item => {
    const li = document.createElement('li');
    li.innerText = item;
    list.appendChild(li);
  });
}

在这个例子中，假设列表数据存储在一个数组中，当用户点击按钮时，将会在数组末尾添加一个新元素（"durian"），然后将更新后的数据渲染到 HTML 上。

需要注意的是，这个例子中只是示范了如何更新列表数据和渲染到 HTML 上，实际应用中可能需要对数据进行更复杂的操作，例如从后端获取数据、使用模板引擎渲染 HTML 等。