Editing html with javascript

I'm fairly new to javascript, I should lead off with that.

The layout of the website I'm building includes a header at the top of the page and a sidebar with nav buttons along the side. What I'm trying to do is that when a nav button is clicked on, it doesn't direct to a whole new .html file, but just changes the elements within the body section in the same index.html file.

I know I could just direct the links to new .html files, but I'd really like to do it in javascript instead.

Here's some of the code I've been using:

function updateBody() {
var body=document.getElementById("body");
var image=document.getElementById("mainImage");
body.removeChild(image);
document.getElementById('bodyText').innerHTML="<p id='bodyText'>This is the new body text</p>";
};

Basically trying to remove whatever the existing img element is, then change the body text. This seems to work, except when I try to go back the other way nothing happens.

Any help would be greatly appreciated!