Select option in blueprint plugin

Hi, I am creating a plugin whereby the contents of 2 selected historical versions of a page will be shown side by side. I am unable to publish the contents of the page versions as html code using the setAttribute(‘value’, content) method as this would convert the content into a string. So the page would display <tb><tr>...</tr></tb>
as oppose to an actual table for example. How do I pass the content as the html code instead? Below are my code:

templae.xml:

<ac:layout>
    <ac:layout-section type="two_equal">
        <ac:layout-cell>
            <p><at:var at:name="pageVersion1"/></p>
        </ac:layout-cell>
        <ac:layout-cell>
            <p><at:var at:name="pageVersion2"/></p>
        </ac:layout-cell>
    </ac:layout-section>
</ac:layout>

script function to set option value:

function fetchPageVersionContent(num){
    let selectedOptions = document.getElementById("pageVersionSel" + num);
    let selectedPageVer = selectedOptions.options[selectedOptions.selectedIndex].text; //get the current selected value for page title
    let contentURL = "";

    let fetchURL = baseURL + "/rest/experimental/content/" + selectedPID + "/version/" + selectedPageVer;   
    fetch(fetchURL)// fetch page version content
    .then(response => response.json())
    .then(json => {
        contentURL = baseURL+json.content._links.webui;
        
        $.ajax({
            url : contentURL,
            success : function(response){
                let contentTitle = "Version " + selectedPageVer + "\n";
                let content = $(response).find("#main-content").html();
                content = contentTitle + content;

                let pageVerSel = document.getElementById(num + "." + selectedPageVer);
                pageVerSel.setAttribute("value", content);  //set the content as the value of the option
                alert("Success");
            }
        })
    });

my soy template:

{template .form}
    <form action="#" method="post" class="aui">
        <fieldset>
            <button onClick="fetchAllPagesTitlesOnClick()" style="margin: 2vh auto; display: block;">Get All Pages</button>

            <div style="display: block;"></div>

            <label for="pageTiles" style="margin: 2vh 2vw;">Select Page Title:</label>
            <select name="pageTitles" id="pageTitleSel" style="margin: 2vh auto;" onchange="fetchVersionsOfPage()">
            </select>

            <button onClick="fetchPageVersionsOnClick()" style="margin: 2vh auto; display: block;">Get All Versions</button>

            <label for="pageVersion1" style="margin: 2vh 2vw;">Select Page Version:</label>
            <select name="pageVersion1" style="margin: 2vh auto;" id="pageVersionSel1" onChange="fetchPageVersionContent(1)">
            </select>

            <div style="display: block;"></div>

            <label for="pageVersion2" style="margin: 2vh 2vw;">Select Page Version:</label>
            <select name="pageVersion2" style="margin: 2vh auto;" id="pageVersionSel2" onChange="fetchPageVersionContent(2)">
            </select>
        <fieldset>
    </form>