How to add a superscript to an array in Javascript

In an array for a calculator, I have: x^y (in HTML it would be x^y) Likewise I have x^-1 Or x^-1. I can't figure out how to add it to the array for only those two buttons in the array so it displays x^y and x^-1 respectively instead of x < sup>y< /sup> (without the spaces, obviously) x < sup>-1< /sup>

js (missing the listeners, etc, but gives you the idea of what I'm aiming for):

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

const buttonValues = [
"Rad", "º", "x!", "(", ")", "%", "AC",
"Inv", "sin", "log", "7", "8", "9", "÷",
"π", "cos", "ln", "4", "5", "6",  "x",
"e", "tan", "√", "1", "2", "3",  "+",
"Ans", "EXP", "^", "0", ".", "=", "-", "+/-", "x^-1",

]

const rightSymbols = [ "÷", "x", "-", "+", "="]
const topSymbols = ["(", ")", "%", "AC"]
const leftSymbols = ["Rad", "º", "x!", "Inv", "sin", "log", "π", "cos", "ln", "e", "tan", "√", "Ans", "EXP", "^", "+/-", "x^-1",]

//A+B, A×B, A-B, A÷B
let A = 0;
let operator = null;
let B = null;

function clearAll() {
A = null;
operator = null;
B = null;
}

for (let i = 0; i < buttonValues.length; i++) {
let value = buttonValues[i];
let button = document.createElement("button");
button.innerText = value;

//styling button colors
if (value == "=") {
    button.style.backgroundColor = "brown";
}

else if (rightSymbols.includes(value)) {
    button.style.backgroundColor = "orange";
}

else if (leftSymbols.includes(value)) {        
    button.style.backgroundColor = "darkorange";
    button.style.color = "white";
}

else if (topSymbols.includes(value)) {        
    button.style.backgroundColor = "orange";
    button.style.color = "white";
}

Answer

You can modify how the button's HTML is set using .innerHTML for just those specific buttons. Use .innerHTML only when you want HTML formatting like superscript. For regular text, stick with .innerText.

For eg. as per your implementation, you can do something like

if (value === "^") {
  button.innerHTML = "x<sup>y</sup>";
} else if (value === "x^-1") {
  button.innerHTML = "x<sup>-1</sup>";
} else {
  button.innerText = value;
}

This way you can make sure "^" will render as xʸ and "x^-1" will render as x⁻¹ making those buttons show superscripts properly.