Holt das äußere HTML des ausgewählten Elements

Question

Ich versuche, die HTML eines ausgewählten Objekts mit jQuery zu erhalten. Ich bin mir bewusst, dass die .html() Funktion; das Problem ist, dass ich das HTML einschließlich des ausgewählten Objekts benötige (in diesem Fall eine Tabellenzeile, in der .html() gibt nur die Zellen innerhalb der Zeile zurück).

Ich habe herum gesucht und fand ein paar sehr "hackish" Art Methoden der Klonen eines Objekts, fügen Sie es zu einem neu erstellten div, etc, etc, aber dies scheint wirklich schmutzig. Gibt es einen besseren Weg, oder bietet die neue Version von jQuery (1.4.2) irgendeine Art von outerHtml Funktionalität?

Answer 1

Ich glaube, dass derzeit (5/1/2012) alle wichtigen Browser die Funktion outerHTML unterstützen. Mir scheint, dass dieser Ausschnitt ausreichend ist. Ich persönlich würde mich dafür entscheiden, dies auswendig zu lernen:

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

EDIT : Grundlegende Statistiken über die Unterstützung für element.outerHTML

• Firefox (Gecko): 11 .... Freigegeben 2012-03-13
• Chrom: 0,2 ............... Freigegeben 2008-09-02
• Internet Explorer 4.0... Freigegeben 1997
• Opera 7 ...................... Freigegeben 2003-01-28
• Safari 1.3 ................... Freigegeben 2006-01-12

Answer 2

Es ist nicht nötig, eine Funktion dafür zu erstellen. Machen Sie es einfach so:

$('a').each(function(){
    var s = $(this).clone().wrap('<p>').parent().html();
    console.log(s);
});

(In der Konsole Ihres Browsers wird übrigens angezeigt, was protokolliert wird. Die meisten aktuellen Browser seit etwa 2009 haben diese Funktion).

Das ist der Zauber am Ende:

.clone().wrap('<p>').parent().html();

Der Klon bedeutet, dass Sie das DOM nicht wirklich stören. Führen Sie es ohne ihn aus und Sie werden sehen p Tags vor/nach allen Hyperlinks (in diesem Beispiel) eingefügt, was unerwünscht ist. Also, ja, verwenden Sie .clone() .

Die Funktionsweise besteht darin, dass sie jede a Tag, erstellt einen Klon davon im RAM, umhüllt ihn mit p Tags, erhält das übergeordnete Element (d. h. die p Tag), und erhält dann die innerHTML Eigenschaft von ihr.

EDIT : Rat befolgt und gewechselt div Tags zu p Tags, weil es weniger Tipparbeit bedeutet und genauso funktioniert.

Answer 3

2014 Edit : Die Frage und diese Antwort sind von 2010. Damals war keine bessere Lösung weithin verfügbar. Heute sind viele der anderen Antworten besser: die von Eric Hu oder die von Re Capcha zum Beispiel.

Diese Website scheint eine Lösung für Sie zu haben: jQuery: outerHTML | Yelotofu

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

Answer 4

Worüber? prop('outerHTML') ?

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

Und zum Einstellen:

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);

Bei mir hat es funktioniert.

PS : Dies wird hinzugefügt in jQuery 1.6 .

Answer 5

Erweitern Sie jQuery:

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

Und verwenden Sie es so: $("#myTableRow").outerHTML();