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:


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

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;
            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

my soy template:

{template .form}
    <form action="#" method="post" class="aui">
            <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()">

            <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)">

            <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)">