Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

HTML-Elemente per JavaScript (jQuery) ersetzen

Mit diesem Beitrag möchte ich ein Code-Snippet archivieren das es euch ermöglicht, Website-Inhalte per jQuery durch andere Inhalte zu ersetzen. Hierbei nutze ich drei verschiedene jQuery-Funktionen, die sich je nach Anforderung mehr oder weniger gut anbieten. Habt bitte immer im Hinterkopf, dass Google es grundsätzlich nicht gerne sieht, wenn ihr dem User andere Inhalte anbietet als dem Googlebot; Stichwort Cloaking. Ihr solltet beim Content-Replacement also immer genau prüfen, was der User und was Google sieht.

Demo

Die folgende Demo-Datei zeigt drei unterschiedliche Möglichkeiten HTML-Elemente per JavaScript zu ersetzen.
Mit der jQuery-Funktion .text() wird der Inhalt eines bestimmten HTML-Elements durch einen alternativen Inhalt ersetzt. Mit .load() ersetzt ihr den Inhalt eines HTML-Elements durch den Inhalt einer externen Datei und .replaceWith() ersetzt nicht nur den Inhalt, sondern auch ausgewählte HTML-Elemente.

Demo in neuem Fenster öffnen

Code

Und so sieht der Quellcode der oben gezeigten Demo-Datei aus. Ich habe alle Funktionen per Kommentar direkt im Code erklärt. Ihr könnt die Dateien der Demo auch herunterladen.

Demodateien herunterladen

Beachtet bitte, dass die Funktion .load() in einer lokalen Version u.U. nicht funktioniert.

...
<body>
<ul>
  <li><a href="#" id="buttonText">Inhalte per .text() ersetzen</a></li>
  <li><a href="#" id="buttonLoad">Inhalte per .load() ersetzen</a></li>
  <li><a href="#" id="buttonReplace">Inhalte per .replaceWith() ersetzen</a></li>
  <li><a href="#" onClick="window.location.reload()">Demo neu laden</a></li>
</ul>

<div id="container">
  <h2 id="topic">Überschrift</h2>
  <div id="content">Inhalt</div>
</div>



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script>
$(document).ready(function(){
		// .text()
		$("#buttonText").click(function(){ 
			$("#topic").text("Mit .text() ersetzte Überschrift"); // Der Inhalt von #topic wird durch den Inhalt von .text() ersetzt
			$("#content").text("Mit .text() ersetzter Inhalt"); // Der Inhalt von #content wird durch den Inhalt von .text() ersetzt
		});
		
		// .load()
		$("#buttonLoad").click(function(){ 
			$('#container').load('ajax/content.html'); // Der gesamte Inhalt von #container wird durch den Inhalt der Datei "ajax/content.html" ersetzt. 
		});
		
		// .replace()
		$("#buttonReplace").click(function(){
			$('#container').replaceWith("<div id='new'><h2>Alles mit .replace() ersetzt</h2><div>Jetzt musst du die Demo neu laden, da sich alle Elemente verändert haben. </div>"); // Sowohl das Element #container als auch der gesamte enthaltene Content wird durch den Inhalt von .replace() ersetzt. 
		});
  });
</script>
</body>
..

Wenn ihr euch weiter mit diesem Thema befassen möchtet, empfehle ich euch folgende weiterführende Links zu den hier beschriebenen Funktionen und Themen.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Jan
    schrieb am 11.01.2016 um 09:12 Uhr:

    Gibt es die Möglichkeit bei erneutem klick auf den Link den ursprünglichen Zustand wieder herzustellen?

    Antworten
  2. Jürgen
    schrieb am 13.09.2013 um 11:58 Uhr:

    Hi und vielen Dank, Dies kann man auch gut nutzen, wenn man am OnpageSEO arbeitet. So kann man z.B. Menus nachladen lassen, wo diese nicht unbedingt von Crawler gesehen werden sollen …

    Antworten
  3. chaoskoeppsche
    schrieb am 01.12.2011 um 13:09 Uhr:

    Ha, ich schon wieder. ^_^

    Wenn man das Ganze ohne Eventhandler vorm schließenden body-Tag einbindet, sieht man nicht einmal die Original-Texte kurz aufblitzen bei einem (re)load. :o)

    Antworten
  4. chaoskoeppsche
    schrieb am 01.12.2011 um 12:24 Uhr:

    So, getestet und funzt…

    …aber nur, wenn ich trotz eh schon im head (etliche Zeilen vorher) eingebundenem JQuery 1.6.1 nochmal den Aufruf direkt vors Script setze. O_o

    Da habe ich dann auch schon durchgetestet, ob es daran liegen könnte, dass…
    …du hier JQuery 1.7.0 verwendest – ich habe ergo auf 1.6.1 geändert – funzt auch mit der Version.
    …die 1.6.1 über http statt https aufgerufen wird – funzt auch mit http.

    Nehme ich das ja in diesem Fall zusätzliche Einbinden von JQuery raus, funzt es nicht. O_o

    Bin ich einfach zu sehr js-Dau oder wo kanns da haken?

    Antworten
  5. chaoskoeppsche
    schrieb am 01.12.2011 um 11:35 Uhr:

    Hello again ;o)

    Wie passend für aktuelle Anliegen deine Posts doch immer kommen – unglaublich!

    Ich frage mich nur, was wohl, wenn ich das einsetze, Vorrang hat innerhalb einer WordPress-Site – die Sprachdatei eines bestimmten Plugins oder das Script …?

    Ich bin nicht wirklich js-gebildet…

    Im konkreten Fall haben wir ein recht umfangreiches WP-Plugin laufen, dessen deutsche Sprachdatei uns zum Teil nicht zusagt von der Formulierung her. Bei jedem Plugin-Update wird die Language-Datei aber mit überschrieben, d.h., unsere Individualisierungen sind nicht mehr existent.

    Ich werds mal ausprobieren und ggf Rückmeldung geben. :o)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →