I have been recently started learning jQuery and am having some problems.
The code format of jQuery is unfamiliar due to me coming from a background of C/C++.

So, my problem is that .append() simply seems not to be appending. I have recently been working on a script to make a popup in jQuery, and needed to append an element to body. Nothing happened. After further testing .append() didn't seem to work. My conclusion is I'm probably misusing it but I'm unaware of how.

```
$('#contact').click(function (e) {
    $('#about').append('<h1>test</h1>');
    e.preventDefault();
});

```

Edit 1: Html was requested

```
<!DOCTYPE html>
<html>
  <head>
    <title>Canteen Mate</title>
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Ubuntu">
    <link rel="stylesheet" type="text/css" href="css/home.css">
  </head>
  <body>
    <div class = "nav_wrapper" id = "nav_wrapper">
      <nav>
        <ul>
          <li class = "current"><a href="#nav_wrapper" id = "Home" class =      "nav">Home</a></li>
          <li><a href="#about" id = "About" class = "nav">About</a></li>
          <li><a href="#contact" id = "Contact" class = "nav">Contact</a>    </li>
    </ul>
  </nav>
</div>
<div class = "wrapper">
  <img src="images/newfood.jpg" alt="Food" class="luncho">
  <div class = "text">
    <h1 class = "motto">Ordering from the canteen has never been so simple<br>
    <p class = "motto-description" id = "about">Order food from your canteen from
    anywhere as long as you have data.</p></h1>
  </div>
</div>

```

Only some of the html was included to save space (the html in the area I'm appending to).
The `<script>` element is at the bottom.