I am always rewriting my headers and footers and for every edit i have to manually copy and paste all the code into the web pages. Obviously this is the wrong approach but im not sure of the right one. My current idea is to have a "header" and "footer" div and then with jquery's $(document).ready load the divs with code. Im afraid it will be slow though because it waits for the whole page to render before executing the header/footer code. What is a common way to handle this problem?
Sounds like you need some server-side technology. Which one (of the many options) you choose is up to you and your hosting. Most likely, your hosting will support PHP and SSI (Server-side includes).
In the simplest setup, basically put the common code into individual files, let's say header.inc and footer.inc. It doesn't matter what the name or extension of these files are.
For PHP, your pages should now be *.php instead of *.html and you need to write this code:
<?php include('header.inc'); ?>
<p>
Here is your regular document.
</p>
<?php include('footer.inc'); ?>
For SSI, you don't have to change the names of your files, and your code would look like this:
<!--#include virtual="header.inc" -->
<p>
Here is your regular document.
</p>
<!--#include virtual="footer.inc" -->