HTML-Elemente per JavaScript (jQuery) ersetzen
Um HTML-Inhalte automatisch oder nach einer Aktion (z.B. per Klick) durch andere Inhalte zu ersetzen, kommt i.d.R. JavaScript ins Spiel. Mit jQuery ist es einfach umgesetzt.
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.
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.
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.
- api.jquery.com/text
- api.jquery.com/load
- api.jquery.com/replacewith
- googlewebmastercentral-de.blogspot.com/2011/11/was-ist-cloaking.html
Gibt es die Möglichkeit bei erneutem klick auf den Link den ursprünglichen Zustand wieder herzustellen?
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 …
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)
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?
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)