Javascript. Замените содержимое HTML в Div

Question

Итак, я в настоящее время создаю веб-сайт, где, когда вы нажимаете на небольшое изображение, оно отображается выше. Наряду с увеличением изображения текст накладывает изображение, описывающее его, и я не могу заставить код изменить текст вправо. Текст более сложный, так как он использует пробелы и т. Д., Поэтому мне нужно разместить 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>

примеры снимок экрана: Перед После

Answer 1

Вы заменяете <h2> тег. Просто переместите свой идентификатор в этот тег или создайте новый идентификатор и используйте его для установки 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