per onclick - zusätzliches DIV mit Inhalt im aktuellen Kontext der Seite

[Shayliar]

Hallo erstmal,
ich heiße Marc, bin in JavaScript ein ziemlicher Neuling und habe direkt eine Frage.
Ich bin beruflich in einem ganz anderen Sektor unterwegs, aber mich interessiert das erstellen von Websites und mag mit JavaScript etwas tiefer in die Materie einsteigen.

Nun zu meinem Problem:

Ich habe ein Script, in dem einige Buttons hinterlegt sind (für jeden Monat einen).
Den Button habe ich mit einem onClick Event versehen:

document.write('<button class="button_monat" onclick="fooMonat();">Januar</button>');

Die Funktion die aufgerufen wird, soll auf der aktuellen Seite in einem in der Funktion erzeugten DIV etwas anzeigen. Sprich, das was bisher angezeigt wird, soll weiter sichtbar sein, und darunter soll die Funktion in einem neuen DIV den Inhalt anzeigen.

function fooMonat()
{

    
    document.write('<div id="user_tab">Hier sieht du deine Dienste.</div>')



}

Dies nur als Testweise (normal steht mehr drin.

in der css-Datei ist dann unter #user_tab folgendes hinterlegt:

#user_tab
{
    position: absolute;
    top: 500px;
    left: 5%;
    height: auto;
    width:90%;
    background-color: #192a36;
}

So, wenn ich nun den Button drücke, passiert folgendes:
- eine weiße Seite erscheint
- bisherige Inhalte der Seite sind nicht mehr vorhanden
- der Text (aus document.write in der Funktion) wird angezeigt
- die DIV-Einstellungen werden nicht benutzt


Wo liegt mein Fehler?
Wenn ich statt der fooMonat() - Funktion ein alert-Event benutze, bleibt alles bestehen und das Event wird angezeigt.
Entschuldigt, wenn ich wie ein völliger noob da stehe.

lg Marc

[mikdoe]

Guten Tag!

document.write() ist aus vielen Gründen nicht geeignet. Manche wünschen sie sich auf den Mond
Ich mag das Wort Anfänger nicht aber dass die Funktion nicht für Anfänger geeignet ist trifft es leider trotzdem auf den Punkt.
Ich empfehle sie zu vergessen, weil du sie niemals brauchen wirst.

Besser ist: Gib dem Ziel Knoten eine id und schreibe document.getElementById('knotenname').innerHTML += 'der text';

Das ist eine ganz simple Konkatenation des bestehenden Inhalts mit dem neuen.

[Shayliar]

Ganz lieben Dank schon Mal für das Feedback. Dann setzte ich mich nach der Arbeit direkt damit auseinander und Versuche dieses Fehler aus zu Kerzen (und document.write() zu vergessen.

Melde mich wenn Fragen auftauchen.