DIV Element per Code adden, löschen und ersetzen

edel242

Hallo Mitstreiter,

ich suche nach einer Lösung, um ein DIV mit Content zu füllen, je nach dem, welche BodyClass oder BodyId aufgerufen wird.
Beispiel:

wenn body id=home:
<div class="ElementContent"><h1>Startseite</h1></div>

wenn body id=kita:
<body id="kita">
<div class="ElementContent"><h1>Kindertagesstätte</h1></div>

Gefunden dafür habe ich:
// Adding an elementconst newElement = document.createElement('div');newElement.textContent = 'Hello, World!';document.body.appendChild(newElement);
// Removing an elementconst elementToRemove = document.getElementById('elementId');elementToRemove.parentNode.removeChild(elementToRemove);
// Modifying an elementconst elementToModify = document.getElementById('elementId');elementToModify.innerHTML = 'New Content';

Code

Ich komme nicht weiter mit der Bedingung

Per CSS ginge es natürlich auch mit display:none, aber da es sich um h1 handelt, möchte ich nicht, dass google mehrere h1 findet!

Hat jemand einen Tipp für mich?

Sempervivum

Hallo edel242 und willkommen im Forum!

Wann soll das Einfügen denn passieren, ich nehme an, gleich beim Laden der Seite?

Alternativ zu den Lösungen, die Du schon gefunden hast, kannst Du innerHTML() oder insertAdjacentHTML() verwenden.

Die Abfrage müsste so aussehen:

Code

const bdy = document.querySelector('body');
switch (bdy.id) {
    case 'home':
        // HTML für Home einfügen
        break;
    case 'kita':
        // HTML für Kita einfügen
        break;
    // usw.
}

(ungetestet)

Versuche, ob Du damit zum Ziel kommst und melde dich wieder, wenn nicht.

edel242

Mega! Da suche ich zwei Tage und dann ist die Lösung doch so relativ simpel. Schmatzer links und rechts - ich danke dir!

<script>
const bdy = document.querySelector('body');
switch (bdy.id) {
case 'home':
document.write('<h1>Berufsfachschule</h1>');
break;
case 'kita':
document.write('<h1>Sie suchen eine Kindertagesstätte?</h1>');
break;
case 'grundschule':
document.write('<h1>Grundschule</h1>');
break;
case 'gymnasium':
document.write('<h1>Gymnasium</h1>');
break;
case 'aus-und-weiterbildung':
document.write('<h1>Aus- und Weiterbildung</h1>');
break;
case 'internat':
document.write('<h1>Internat</h1>');
break;
}
</script>

Jetzt mitmachen!