kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. chaoskoeppsche

    Verfasst am 1. Dezember 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)

  2. chaoskoeppsche

    Verfasst am 1. Dezember 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?

  3. chaoskoeppsche

    Verfasst am 1. Dezember 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)

  4. Jürgen

    Verfasst am 13. September 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 …

  5. Jan

    Verfasst am 11. Januar 2016 um 9:12 Uhr.

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.