Javascript。替换 Div 的 HTML 内容

所以我目前正在构建一个网站，当您单击一个小图像时，它会在上方显示更大的图像。随着图像被放大，文本覆盖了描述它的图像，我似乎无法获得正确更改文本的代码。文本更复杂，因为它使用跨度等，所以我必须放置 HTML 代码，它只显示没有格式的文本。

    // Image 1 - Football
function change1() {
    document
        .getElementById("mainPic")
        .src = "http://files.stv.tv/imagebase/170/623x349/170248-lossiemouth-fc.jpg"
    ;
    document
        .getElementById("imageCaption")
        .innerHTML = "<span>Lossiemouth Football Club<span class='spacer'></span><br /><span class='spacer'></span>Come watch a game of football!</span>"
    ;
}

// Image 2 - Football
function change2() {
    document
        .getElementById("mainPic")
        .src = "http://www.visitscotland.com/wsimgs/Course%206_704927777.JPG[ProductMain]"
    ;
    document
        .getElementById("imageCaption")
        .innerHTML = "<span>Golf Course<span class='spacer'></span><br /><span class='spacer'></span>Come play a couple rounds of golf!</span>"
    ;
}

<div id="imageCaption">
    <h2 align="left" style="padding-left: 105px;">
        <span>Lossiemouth Football Club
            <span class="spacer"></span>
            <br />
            <span class="spacer"></span>
            Come watch a game of football!
        </span>
    </h2>
</div>

屏幕截图示例: 前 enter image description here 后