Javascript. Replace HTML content of a Div

So I am currently building a website where when you click on a small image it displays bigger above. Along with the image being enlarged text overlays the image describing it and I can't seem to get the code to change the text right. The text is more complicated as it uses spans etc so i have to place HTML code to and it just displays the text without the formatting.

    // Image 1 - Football
function change1() {
    document
        .getElementById("mainPic")
        .src = "http://ift.tt/1OSNKrL"
    ;
    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://ift.tt/1z5OFn6]"
    ;
    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>

Screen shot examples: Before After