Javascript。 替换Div的HTML内容

Question

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

Screen shot examples: Before After

Answer 1

You are replacing the <h2> tag. Just move your id to that tag or create a new id and use it to set innerHTML

Answer 2

The code you are inserting with the javascript is different than the code that is initially in the 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>

is becoming

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

You need to either add the <h2> tag or change what you reference with document.getElementById