Вставка тегов в строку массива javasciprt

Имеются исходники:

    const quizData = [
    {
        question: "What does HTML stand for?",
        a: "Helicopters Terminal Motorboats Lamborginis",
        b: "Hypertext Markup Laguage",
        c: "H <sup>2</sup> O",
        correct: "b",
    },
    {
        question: "What does CSS stand for?",
        a: "Cascading Style Sheets",
        b: "Cars SUVs Sailboats",
        c: "Central Style  Sheets",
        correct: "a",
    },
    {
        question: "What year did JavaScript appear?",
        a: "1899",
        b: "2005",
        c: "1995",
        correct: "c",
    },
    {
        question: "Who is the author of the JavaScript language?",
        a: "Bill Gates",
        b: "Brendan Eich",
        c: "Steve Jobs",
        correct: "b",
    },
    {
        question: "What language is this project written in?",
        a: "JavaScript",
        b: "Ruby",
        c: "C++",
        correct: "a",
    },
];



const quiz = document.getElementById('quiz');
const answerElements = document.querySelectorAll('.answer');
const questionElement = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const submit = document.getElementById('submit');

let currentQuiz = 0;
let score = 0;

loadQuiz();

function loadQuiz(){
    deselectAnswers();

    const currentQuizData = quizData[currentQuiz];
    console.log(quizData[currentQuiz].c)

    questionElement.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
}

function deselectAnswers(){
    answerElements.forEach(answerEl => answerEl.checked = false)
}

function getSelected(){
    let answer;

    answerElements.forEach(answerEl => {
        if(answerEl.checked){
            answer = answerEl.id;
        }
    });

    return answer;
}

submit.addEventListener('click', () => {
    const answer = getSelected();

    if(answer){
        if(answer === quizData[currentQuiz].correct){
            score++;
        }

        currentQuiz++;

        if(currentQuiz < quizData.length){
            loadQuiz();
        }
        else{
            quiz.innerHTML = `<h2>You answered coreectly at ${score}/${quizData.length} questions</h2>
            <button onclick="location.reload()">Reload</button>
            `;
        }
    }
});

Мне нужно вставить в строку с вариантом ответа тег , чтобы корректно отображать формулы при выводе вопроса с вариантами ответа, но при получается, какая-то лажа. Возможно ли без подключения jquery реализовать корректное отображение тегов?

css файл:

*{
   box-sizing: border-box;
    }
    body{
        font-family: 'Roboto', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        margin: 0;
        background: url('../images/bg.jpg') no-repeat;
        background-position: center;
        background-size: cover;
    }
    h2{
        padding: 16px;
        text-align: center;
        margin: 0;
    }
    .quiz-box{
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
        width: 600px;
        overflow: hidden;
    }
    .quiz-header{
        padding: 64px;
    }
    ul{
        list-style: none;
        padding: 0;
    }
    ul li{
        font-size: 20px;
        margin: 15px 0;
    }
    ul li label{
        cursor: pointer;
    }
    button{
        background-color: #5ec6eb;
        border: none;
        display: block;
        width: 100%;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        color: #000000;
        padding: 15px;
        transition: all 0.5s ease;
    }
    button:hover{
        background-color: #438faa;
    }
    button:focus{
        outline: none;
        background-color: #5ec6eb;
    }

.html файл:

<!DOCTYPE html>
<html lang="en">
<head>      
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="true">
    <meta name = "format-detection" content = "telephone=no">
        
    <title>Quiz Project</title>

    <!-- Styles -->
    <link rel="stylesheet" type="text/css"  href="main.css" />

</head>
<body>
<div class="quiz-box" id="quiz">
    <div class="quiz-header">
        <h2 id="question">Question text</h2>
        <ul>
            <li>
                <input type="radio" name="answer" id="a" class="answer">
                <label for="a" id="a_text">Question</label>
            </li>
            <li>
                <input type="radio" name="answer" id="b" class="answer">
                <label for="b" id="b_text">Question</label>
            </li>
            <li>
                <input type="radio" name="answer" id="c" class="answer">
                <label for="c" id="c_text">Question</label>
            </li>
        </ul>
    </div>
    <button id="submit">Submit</button>
</div>
    


 <!-- Scripts -->
 <script src="main.js"></script>
</body>  
</html>