Добавление элементов при нажатии кнопки

Question

JavaScript:

<script type="text/javascript"> 

    function createRow() { 
     var d = document.createElement("section"); 
     d.className = "gallery-row"; 
     document.getElementById("gallery").appendChild(d); 

    } 

    </script> 

HTML:

<section id="container-main"> 
     <section id="gallery"> 
      <section class="gallery-row"> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
      </section> 
      <section class="gallery-row"> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
      </section> 
      <section class="gallery-row"> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
       <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" /> 
      </section> 
     </section> 
     <section id="load-more"><button onclick="createRow();">Load More</button></section> 
    </section> 

Проблема:

Проще говоря, сценарий не создает раздел элемента после последнего элемента раздел с ИД «Галерея», как и предполагалось. Я боролся с этим часами, и я не уверен, как действовать дальше. Если бы кто-то мог указать, что я делаю неправильно, я был бы признателен. Я просмотрел документацию, но безрезультатно.

Answer 1

То, что у вас хорошо работает, в этом нет ничего, поэтому вы его не видите. Попробуйте следующее, и вы увидите следующее:

function createRow() { 
    var d = document.createElement("section"); 
    d.className = "gallery-row"; 
    d.innerHTML = "test" 
    document.getElementById("gallery").appendChild(d); 

}