Jeg har gennem mange år udviklet til IE only applikationer, og har brugt DOM-element egenskaben: outerHTML til mange ting, men i jQuery, findes der ikke en tilsvarende funktion. Man har innerHTML via html() på de enkelte elementer i en jQuery udvælgelse, og man kan jo ikke altid bruge: $(“#id”).parent().html(). Det virker jo ikke, hvis der er andre elementer på samme niveau.

Der er derfor mange der har lavet en lille plugin til formålet. Jeg synes dog ikke at der er nogen af dem der er rigtigt gode, da de fleste omkranser elemetets innerHTML med en p-tag, eller forsøger at lave noget smart med parent(). Jeg har derfor lavet en lille plugin:

// outerHtml plugin
(function($) {
    $.fn.outerHtml = function() {
        if ($.browser.msie) {
            return this[0].outerHTML;
        }
        else {
            var attrStr = "";
            $(this[0].attributes).each(function(i, itm) {
                attrStr += " {0}='{1}'".format(itm.name, itm.nodeValue);
            });
            return "<{0}{2}>{1}</{0}>".format(this[0].tagName, this[0].innerHTML, attrStr);
        }
    };
})(jQuery);

Bemærk at jeg bruger “{0}” format syntaks, som jeg har fra Core biblioteket.

Som du kan se, så checker jeg lige om der er tale om en IE browser via $.browser.msie propertyen. For hvis det er tilfældet, kan man jo lige så godt bruge DOM’en. Hvis ikke, skal vi lige manipulerer lidt. Jeg starter med at loope attributterne igenem for at få samlet dem og deres værdi på en streng af formen: “attr=’value’”. Der efter indsætter jeg dem i en streng der henholdsvis består af elementnavnet og innerHTML.

Code on…