James Balajan James Balajan - 3 months ago 18
HTML Question

How to properly use .append()

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.

Answer

Your ids in your html are capitalized (Contact, not contact), but you're using all lowercase in your JavaScript. Change the jQuery selectors too:

$('#Contact').click(function (e) {
    $('#About').append('<h1>test</h1>');
    e.preventDefault();
});

Or make the ids lowercase in HTML:

<a href="#about" id="about" class="nav">About</a>
<a href="#contact" id="contact" class="nav">Contact</a>