Dynamiczna zmiana zawartości DIVa

Witam,

Nie wiem za bardzo jak osiągnąć dynamiczną zmianę zawartości DIVa. Otoż mam na stronie element DIV oraz kilka przycisków. Element DIV ma ID="mojDIV". Każdy z przyciskow miałby cos napisać (usuwając poprzednią zawartość) w elemencie DIV. To znaczy, pierwszy przycisk wyświetla liste osob w mojDIV. Drugi przycisk wyświetla liste ksiażek w mojDIV itd. Na razie robie to poprzez:

var mojDIC = document.getElementById('ramkaTop');

function aboutAuthors()
{
	mojDIV.innerHTML = "<a href='#' onClick='about(osoba1);'>Osoba 1</a><br><a href='#' onClick='about(osoba2);'>Osoba 2</a>";
}

function poezja()
{
	mojDIV.innerHTML = "<a href='#' onClick='ksiazka(ks1);'>Książka 1</a><br><a href='#' onClick='wiersz(ks2);'>Książka 2</a>";
	
}

Problem w tym, że to nie działa tak, aby sie zmieniała zawartość tego elementu DIV. Ma ktoś pomysł jak to rozwiązać? Będzie potrzebny AJAX?

Czesc pliku index.html:

<div id="wrap">		
		<div id="ramkaTop">
			tekst próbny :)
		</div>
		
		<div id="buttons">
			<ul>
				<li><img id="autorzy" src="graphics/Autorzy.png" alt="Autorzy" width="154" height="64" onclick="aboutAuthors();" /></li>
				<li><img id="poezja" src="graphics/Poezja.png" alt="Poezja" width="154" height="64" onclick="poezja();" /></li>
			</ul>
		</div>
	</div>

Pewnie problem jest tutaj:

var mojDIC = document.getElementById('ramkaTop');

Zastanów się, co tutaj jest źle.

To był bład przy wpisywaniu. Postanowiłem zrobic tak:

function aboutAuthors()
{
        var mojDIC = document.getElementById('ramkaTop');
        mojDIV.innerHTML = "<a href='#' onClick='about(osoba1);'>Osoba 1</a><br><a href='#' onClick='about(osoba2);'>Osoba 2</a>";
}
 
function poezja()
{
        var mojDIC = document.getElementById('ramkaTop');
        mojDIV.innerHTML = "<a href='#' onClick='ksiazka(ks1);'>Książka 1</a><br><a href='#' onClick='wiersz(ks2);'>Książka 2</a>";
 
}

Działa tylko pierwszy przycisk. Reszta nie działa. Natomiast w htmlu mam taki kod:

<div id="wrap">		
		<div id="ramkaTop" name="ramkaTop" >
			tekst próbny
		</div>
		
		<div id="buttons">
			<ul>
				<li><img id="autorzy" src="graphics/Autorzy.png" alt="Autorzy" width="154" height="64" onclick="aboutAuthors();" /></li>
				<li><img id="poezja" src="graphics/Poezja.png" alt="Poezja" width="154" height="64" onclick="poezja();" /></li>
			</ul>
		</div>	
	</div>

Lepiej do tego zaprzęgnąć jQuery; będziesz miał dodatkowo kilka efektów do wykorzystania (fade, slide, itd.);
BTW, sprawdź, co wywala konsola.

Pojawia się problem ze zdarzeniem onClick: "Uncaught TypeError: undefined is not a function (anonymous function)" w linii:

<li><img id="poezja" src="graphics/Poezja.png" alt="Poezja" width="154" height="64" onclick="poezja();" /></li>

Edit:

problem jest również, jeśli z pierwszej funkcji odwolam sie do jakiejsc zew. funkcji:
mojDIV.innerHTML = "<a href='#' onClick='about(osoba1);'>Osoba 1</a><br><a href='#' onClick='about(osoba2);'>Osoba 2</a>"

i w funkcji about() bede sie odwolywal do elementu mojDIV to koncola wypluwa: "Uncaught ReferenceError: martyna is not defined
(anonymous function)main.php:1
onclick"

Jest wskazanie na pierwsza linie:

skoro Ci pisze: martyna is not defined
to pokaż nam fragment kodu w którym jest słowo "martyna"

martyna to osoba1 w kodzie. Poradzilem sobie z problemem przy pomocy jquery ale bardziej martwi mnie rozwiazanie bez niego.

no to użyłeś martyna jako zmiennej
zapewne chodziło Ci o tekst "martyna" czyli zapomniałeś ująć tego słowa w cudzysłowy (które byś musiał escape'ować, bo to już trzeci zagnieżdżony cudzysłów: \")

Sprawdze te cudzyslowy. Do tej pory wzorem jedenj stronki uzywalem na zewnatrz " a wewnetrznych pojedynczych '. Z rana sprawdze czy to dziala. Choc najdziwniejsze jest to, ze taka funkcja dla pierwszego przycisku dziala. Nie dziala dla kolejnych, wiec nie jestem przekonany czy to pomoze.