如何让文本显示在锚点下方？

Question

我正在尝试制作一个显示您计算机当前电池电量的按钮。它的工作方式是，您单击一个按钮，然后在 JavaScript 控制台中，它会显示您的计算机当前的电池电量。不把关卡放在控制台，有没有办法在锚标签下方显示关卡？

function batlevel() {
  navigator.getBattery().then(function(battery) {

    var level = battery.level;

    console.log(level);
  })
};

<a onclick="batlevel()">hi</a>

Answer 1

非常直接。获取要追加的元素，创建标签，设置innerText，然后追加

function batlevel() {
  navigator.getBattery().then(function(battery) {

    var level = battery.level;
    var p = document.createElement("p");
    
    p.innerText = level;
    
    document.getElementsByTagName('a')[0].append(p)

    console.log(level);
  })
};

<a onclick="batlevel()">hi</a>

Answer 2

function batlevel() {
  navigator.getBattery().then(function(battery) {

    var level = battery.level;

    console.log(level);
    document.getElementById('levelId').innerHTML = 'this is the level' + level;
  })
};

<a onclick="batlevel()">hi</a>
<div id="levelId"></div>

Answer 3

考虑以下内容。

function getBatLevel(target) {
  var level;
  navigator.getBattery().then(function(battery) {
    level = (battery.level * 100);
    if (target == undefined) {
      console.log(level + "%");
    } else {
      target.after(" " + level + "%");
    }
  });
};

<a onclick="getBatLevel(this)">Get Level</a>

这利用了.after() 调用：https://developer.mozilla.org/en-US/docs/Web/API/Element/after

如果你愿意，你可以将它包装在一个元素中。