user2399500 user2399500 - 1 year ago 60
Javascript Question

Why wont simple jQuery .append work?

I'm trying to make a small picture gallery, showing off pictures from our wedding. I would like to use js / jQuery to append pictures to the three divs, automatically on load, and clear them and load other pictures when the navbar is clicked.

The problem is that the simplest js / jQuery does not work, and I'm starting to pull my aldready sparse hair out... below index.html:

<!DOCTYPE html>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src="script.js"></script>
<script src=""></script>
<div id="header">
<div id="navbar">
<li>I skoven</li>
<div class="picFrame" id="pf1"><img src="pics/1.jpg"></div>
<div class="picFrame" id="pf2"><img src="pics/2.jpg"></div>
<div class="picFrame" id="pf3"><img src="pics/3.jpg"></div>

below script.js:

$(document).ready(function () {
$("#pf2").append('<img src="pics/4.jpg">');

All the pictures are there and work fine when written directly in the html...
Where on earth am I going wrong?

Thanks in advance

Answer Source

Change the order of your script inclusion- (jquery should be included before any other script that itself uses jquery)

<script src=""></script>
<script type='text/javascript' src="script.js"></script>