Ein Artikel von Paul Lunow, erschienen 2009 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

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() {
        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. **