Javascript 在合流页面中呈现HTML元素

我正在创建一个blueprint插件，它在一个单独的页面中并排显示一个页面的两个版本，以便进行比较。我能够获得并排显示的版本内容，问题是HTML元素没有呈现。下面是一个例子：

页面内容被传递到select选项标记的value属性中。如何获取要呈现的HTML元素？谢谢

编辑： 我使用一个大豆模板来选择我想要比较的页面和版本。通过Javascript，我将版本的内容附加到标签的value属性。然后在XML模板上呈现内容

下面是我的代码

大豆模板

XML模板

setAttribute

无法呈现html值

相反，尝试使用

innerHTML

let aTag=document.getElementById（'test'）；
设cnt=''
//aTag.setAttribute（'value'，cnt）；
//innerHTML reder标记
aTag.innerHTML=cnt
请提供一个。这对我很有用：嗨，jacobkim，谢谢你抽出时间。此解决方案的问题在于，Soy模板是将在XML模板上显示的内容的设置向导。因此，我必须使用select和option HTML标记来允许用户选择他们想要的版本。使用select和option标记将内容获取到XML模板的唯一方法是通过value属性。
{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="pageTiles" style="margin: 2vh 2vw;">Select Version:</label>
            <select name="pageVersion1" style="margin: 2vh auto;" id="pageVersionSel1" onChange="fetchPageVersionContent(1)">
            </select>

            <div style="display: block; margin: 2vh auto;"></div>

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

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 => {
        console.log(json);
        contentURL = baseURL+json.content._links.webui;
        console.log(contentURL);
        
        $.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");
            }
        })
    });

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