dimanche 19 avril 2015

Adding elements when button is clicked

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>


The Problem:


Simply put, the script does not create a section element after the last element in the section with the ID "gallery" as intended. I've been struggling with this for hours and I'm not sure how to proceed. If someone could point out what I am doing wrong, I would appreciate it. I've looked over documentation, but to no avail.


Aucun commentaire:

Enregistrer un commentaire