HTML-Elemente per JavaScript (jQuery) ersetzen

jquery-logo-icon

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.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

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.