Das komplette HTML eines Elements mit jQuery auslesen

Klingt komisch, ist aber ab und zu ganz nützlich. Worum geht es? Im Elementstack von jQuery liegt ein Element welches an einem anderen Ort wieder eingefügt werden soll. So sieht das HTML Element aus:

<a href="#" id="ein-interner-link">Ein <span>wichtiger</span> Link</a>

Natürlich wird das Element ausgewählt und das HTML mit der Funktion html ausgelesen.

$("#ein-interner-link").html();

Diese Abfrage liefert allerdings das hier:

Ein <span>wichtiger</span> Link

Das ist nicht das gesamte HTML, sondern nur das innerHTML. Im folgenden Artikel gibt es die Lösung. Oder direkt zur verbesserten Lösung.

Der komplette HTML Code

Das zu selektierende Element wird mit einem Container umschlossen, dieser wird ausgewählt und dann befindet sich in der innerHTML Eigenschaft der komplette HTML Code des Elements.

So sieht es dann mit jQuery aus:

$("#ein-interner-link").wrap("<div></div>").parent().html();

Das liefert zwar den korrekten HTML Code, hat allerdings zwei Probleme:

1. Der Ursprungslink befindet sich jetzt in einem DIV Container. Wenn diese Funktion mehrfach angewendet wird, hat man eine ganze Reihe DIVs um den Link.

Die Lösung ist wieder einfach: Vor dem umschließen wird das Element kopiert:

$("#ein-interner-link").clone().wrap("<div></div>").parent().html();

2. Die Lösung ist so unelegant. Und wenig jQuery-like. Wenn jemand einen besseren Weg kennt, dann her damit. Bis dahin habe ich die Funktionalität in das Plugin entireHtml ausgelagert:

(function($) {

  jQuery.fn.entireHtml = function() {

  [tab]return this.clone().wrap('<div></div>').parent().html();

  }

})(jQuery);

Damit sieht es netter aus und wenn der rettende, alles erklärende Kommentar auftaucht, ist eine Veränderung nur noch an einer Stelle notwendig. So sieht die Anwendung dann aus:

$("#ein-interner-link").entireHtml();

Das ist doch wieder ganz nett. Was meinst du?

Inzwischen gibt es eine verbesserte Lösung in Pauls Blog.