Javascript。替换Div的HTML内容

Alpine 发表于 Dev

高山的

因此，我目前正在建立一个网站，当您单击一个小图像时，它会在上方显示较大的图像。随着图像被放大，文本覆盖了描述它的图像，我似乎无法获得正确更改文本的代码。文本更复杂，因为它使用跨度等，因此我必须将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>

屏幕截图示例：之前在此处输入图片说明之后