前端树形按钮布局与getElementById元素获取问题求助

我是JavaScript/HTML/CSS编程新手，已完成Java后端开发，正在为其开发前端WebUI，需要以树形结构展示按钮。目前大部分功能开发完成，但遇到两个问题：

• 无法实现每行按钮的均匀间距；
• 即使使用window.onload，仍无法通过ID获取元素，尽管页面检查可见该元素及其ID。

JS代码 #

getTree();
addButtons();
window.onload = function() {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext('2d');
  ctx.beginPath();
  canvas_arrow(ctx, document.getElementById("rank1").x,
    document.getElementById("rank1").y,
    document.getElementById("rank2").x,
    document.getElementById("rank2").y);
  ctx.strokeStyle = '#ffffff';
  ctx.stroke();
};

function addButtons() {
  fetch('/api/tree').then(async(response) => {
    await response.json().then(result => {
      let i = 0;
      result.forEach(function(item) {
        let section = document.getElementById("rankButtons");
        let element = document.createElement("button");
        if (i !== item["tier"]) {
          section.appendChild(document.createElement("br"));
          section.appendChild(document.createElement("br"));
          i = item["tier"];
        }
        element.id = item["rankID"];
        element.value = item["rankName"];
        element.name = "rankButton";
        element.textContent = item["rankName"];
        section.appendChild(element);
      });
    })
  }).catch(error => {
    console.log(error)
  })
}
function canvas_arrow(context, fromX, fromY, toX, toY) {
let headLength = 10; // length of head in pixels
let dx = toX - fromX;
let dy = toY - fromY;
let angle = Math.atan2(dy, dx);
context.moveTo(fromX, fromY);
context.lineTo(toX, toY);
context.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
context.moveTo(toX, toY);
context.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));

CSS代码 #

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

body {
  color: white;
  opacity: 1;
}

table,
th,
td {
  border: 2px solid white;
  opacity: 1;
  margin: auto;
  text-align: center;
  width: 80%;
  table-layout: fixed;
}

td {
  white-space: pre;
  padding: 5px;
}

button {
  background: linear-gradient(to bottom right, #CC0033, #3300CC);
  padding: 5px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  resize: none;
  border: 1px solid #30273a;
  box-shadow: 0 0 10px #8d78a5;
  border-radius: 15px 15px 15px 15px;
  z-index: 2;
  position: relative;
}

#content {
  margin: 100px auto 0;
  width: 750px;
  max-width: 80%;
  padding: 0 0 40px;
  text-align: center;
  position: relative;
}

#viewport {
  height: 100%;
  width: 100%;
  position: relative;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en" style="background-color: black">
<head>
    <div class="header">
        <img src="./RDQ-512-Logo.jpg" alt="logo">
    </div>
    <meta charset="UTF-8">
    <title id="title">Rank Up Tree</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="tree.css">
</head>
<body>

<details>
    <summary style="text-align: center; font-size: 20px">Available Ranks</summary>
    <pre v-pre="true" class="prismjs line-numbers" style="text-align: center">
        <table id="ranks" class="table table-striped" style="font-size:12px"></table>
    </pre>
</details>
<canvas id="canvas" width="400" height="500" style="border:1px solid #000000;">
</canvas>
<div id="content">
    <div id="rankButtons"></div>
</div>
<script src="tree.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者ItsRainingHP