Как правильно отобразить надстрочный текст в массиве кнопок JavaScript

Оффтоп javascript
1

Проблема с отображением степеней в калькуляторе

Делаю калькулятор и столкнулся с проблемой. У меня есть массив с кнопками, где нужно показать степени: a^b и a^-1. В HTML это должно выглядеть как a<sup>b</sup> и a<sup>-1</sup>. Но когда добавляю эти теги в массив, они отображаются как обычный текст, а не как надстрочные символы.

const screen = document.getElementById("screen");

const calcButtons = [
  "Deg", "°", "n!", "(", ")", "%", "Clear",
  "Inv", "sin", "log", "7", "8", "9", "÷",
  "π", "cos", "ln", "4", "5", "6", "×",
  "e", "tan", "√", "1", "2", "3", "+",
  "Ans", "EXP", "^", "0", ".", "=", "-", "+/-", "a^-1",
]

const operatorButtons = [ "÷", "×", "-", "+", "="]
const functionButtons = ["(", ")", "%", "Clear"]
const specialButtons = ["Deg", "°", "n!", "Inv", "sin", "log", "π", "cos", "ln", "e", "tan", "√", "Ans", "EXP", "^", "+/-", "a^-1",]

let firstNum = 0;
let operation = null;
let secondNum = null;

function resetCalculator() {
  firstNum = null;
  operation = null;
  secondNum = null;
}

for (let j = 0; j < calcButtons.length; j++) {
  let btnValue = calcButtons[j];
  let calcBtn = document.createElement("button");
  calcBtn.innerText = btnValue;

  if (btnValue == "=") {
    calcBtn.style.backgroundColor = "darkred";
  }
  else if (operatorButtons.includes(btnValue)) {
    calcBtn.style.backgroundColor = "orange";
  }
  else if (specialButtons.includes(btnValue)) {        
    calcBtn.style.backgroundColor = "darkorange";
    calcBtn.style.color = "white";
  }
  else if (functionButtons.includes(btnValue)) {        
    calcBtn.style.backgroundColor = "orange";
    calcBtn.style.color = "white";
  }
}

Как сделать так, чтобы именно эти две кнопки отображались с правильным форматированием степеней?