user2399500 user2399500 - 7 months ago 10
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>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src="script.js"></script>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<title>xXxXxXxXx</title>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Kirken</li>
<li>I skoven</li>
<li>Receptionen</li>
<li>Festen</li>
<li>Gaverne</li>
<li>Fotograferne</li>
</ul>
</div>
<h2>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
<h3>YYYYYYYYY</h3>
</div>
<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>
</body>
</html>


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
J.

Answer

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

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type='text/javascript' src="script.js"></script>
Comments