的JavaScript。替换Div的HTML内容

Question

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

＆＃13;

＆＃13;

    // 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>"
    ;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

截屏示例： 之前 后

Answer 1

您正在替换<h2>标记。只需将您的ID移动到该标记或创建新ID，然后使用它来设置innerHTML

Answer 2

使用javascript插入的代码与最初在div中的代码不同。 change1()

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

正在成为

<span>Lossiemouth Football Club<span class='spacer'></span><br /><span class='spacer'></span>Come watch a game of football!</span>

您需要添加<h2>代码或更改您使用document.getElementById

引用的内容