Erhalten Sie das äußere HTML des ausgewählten Elements

Ich versuche, den HTML-Code eines ausgewählten Objekts mit jQuery zu erhalten. Ich bin mir der .html() -function bewusst; Das Problem ist, dass ich das HTML einschließlich des ausgewählten Objekts brauche (in diesem Fall eine Tabellenzeile, wobei .html() nur die Zellen innerhalb der Zeile zurückgibt).

Ich habe herumgesucht und einige sehr “hackische” Methoden gefunden, ein Objekt zu klonen, es zu einem neu erstellten div hinzuzufügen, etc, aber das scheint wirklich dreckig zu sein. Gibt es einen besseren Weg, oder bietet die neue Version von jQuery (1.4.2) irgendeine Art von outerHtml functionalität?

2014 Edit: Die Frage und diese Antwort stammen aus dem Jahr 2010. Zu dieser Zeit gab es keine bessere Lösung. Jetzt sind viele der anderen Antworten besser: Eric Hus oder Re Capchas zum Beispiel.

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

 jQuery.fn.outerHTML = function(s) { return s ? this.before(s).remove() : jQuery("

").append(this.eq(0).clone()).html(); };

Ich glaube, dass derzeit (1. 5. 2012) alle gängigen Browser die OuterHTML-function unterstützen. Es scheint mir, dass dieser Ausschnitt ausreichend ist. Ich persönlich würde wählen, dies zu merken:

 // Gives you the DOM element without the outside wrapper you want $('.classSelector').html() // Gives you the outside wrapper as well $('.classSelector')[0].outerHTML 

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

  • Firefox (Gecko): 11 …. Veröffentlicht am 2012-03-13
  • Chrome: 0.2 …………… Veröffentlicht am 2008-09-02
  • Internet Explorer 4.0 … Veröffentlicht 1997
  • Opera 7 …………………. Veröffentlicht am 2003-01-28
  • Safari 1.3 ……………….. Veröffentlicht am 2006-01-12

Keine Notwendigkeit, eine function dafür zu erzeugen. Mach es einfach so:

 $('a').each(function(){ var s = $(this).clone().wrap('

').parent().html(); console.log(s); });

(Die Konsole Ihres Browsers zeigt übrigens, was protokolliert wird. Die meisten der neuesten Browser seit etwa 2009 haben diese function.)

Die Magie ist das am Ende:

 .clone().wrap('

').parent().html();

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

Die functionsweise besteht darin, dass jeder a Tag benötigt, einen Klon daraus im RAM erstellt, mit p Tags innerHTML das innerHTML (das p Tag) erhält und dann die innerHTML Eigenschaft erhält.

EDIT : Hat Rat genommen und div Tags zu p Tags geändert, weil es weniger tippt und dasselbe funktioniert.

Was ist mit: prop('outerHTML') ?

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

Und einstellen:

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

Es hat für mich funktioniert.

PS : Dies wird in jQuery 1.6 hinzugefügt.

Erweitern Sie jQuery:

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

Und benutze es wie $("#myTableRow").outerHTML(); : $("#myTableRow").outerHTML();

Ich stimme Arpan zu (13. Dezember 10 5:59).

Seine Art, es zu tun, ist tatsächlich eine viel bessere Art, es zu tun, da du Klon nicht benutzt. Die Klon-Methode ist sehr zeitaufwendig, wenn Sie outerHTML haben, und niemandem sonst schien es egal zu sein, dass IE tatsächlich das outerHTML Attribut HAT (ja, IE hat tatsächlich einige nützliche Tricks im Ärmel).

Aber ich würde wahrscheinlich sein Skript ein bisschen anders erstellen:

 $.fn.outerHTML = function() { var $t = $(this); if ($t[0].outerHTML !== undefined) { return $t[0].outerHTML; } else { var content = $t.wrap('
').parent().html(); $t.unwrap(); return content; } };

Um wirklich jQuery- outerHTML() zu sein, möchten Sie vielleicht, dass outerHTML() ein Getter und ein Setter ist und sein Verhalten so ähnlich wie html() outerHTML() :

 $.fn.outerHTML = function (arg) { var ret; // If no items in the collection, return if (!this.length) return typeof arg == "undefined" ? this : null; // Getter overload (no argument passed) if (!arg) { return this[0].outerHTML || (ret = this.wrap('
').parent().html(), this.unwrap(), ret); } // Setter overload $.each(this, function (i, el) { var fnRet, pass = el, inOrOut = el.outerHTML ? "outerHTML" : "innerHTML"; if (!el.outerHTML) el = $(el).wrap('
').parent()[0]; if (jQuery.isFunction(arg)) { if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false) el[inOrOut] = fnRet; } else el[inOrOut] = arg; if (!el.outerHTML) $(el).children().unwrap(); }); return this; }

Arbeitsdemo: http://jsfiddle.net/AndyE/WLKAa/

Dies erlaubt uns, ein Argument an outerHTML zu outerHTML , was sein kann

  • eine function (index, oldOuterHTML) { } function – function (index, oldOuterHTML) { } – wobei der Rückgabewert der neue HTML- function (index, oldOuterHTML) { } für das Element wird (sofern nicht false zurückgegeben wird).
  • eine Zeichenfolge, die an Stelle des HTML-Codes jedes Elements gesetzt wird.

Weitere Informationen finden Sie in den jQuery-Dokumenten für html() .

Sie können auch get verwenden (die vom jQuery-Objekt abgeglichenen DOM-Elemente abrufen.).

z.B:

 $('div').get(0).outerHTML;//return "
"

Als Erweiterungsmethode:

 jQuery.fn.outerHTML = function () { return this.get().map(function (v) { return v.outerHTML }) }; 

Oder

 jQuery.fn.outerHTML = function () { return $.map(this.get(), function (v) { return v.outerHTML }) }; 

Mehrfachauswahl und Rückgabe eines Arrays von HTML.

 $('input').outerHTML() 

Rückkehr:

 ["", ""] 

Um ein vollständiges jQuery-Plugin als .outerHTML , fügen Sie das folgende Skript zu einer js-Datei hinzu und fügen Sie es nach jQuery in Ihre Kopfzeile ein:

update Neue Version hat eine bessere Kontrolle und einen mehr jQuery Selector freundlichen Service! 🙂

 ;(function($) { $.extend({ outerHTML: function() { var $ele = arguments[0], args = Array.prototype.slice.call(arguments, 1) if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele); if ($ele.length) { if ($ele.length == 1) return $ele[0].outerHTML; else return $.map($("div"), function(ele,i) { return ele.outerHTML; }); } throw new Error("Invalid Selector"); } }) $.fn.extend({ outerHTML: function() { var args = [this]; if (arguments.length) for (x in arguments) args.push(arguments[x]); return $.outerHTML.apply($, args); } }); })(jQuery); 

Dies ermöglicht es Ihnen, nicht nur das OuterHTML eines Elements zu erhalten, sondern sogar eine Array-Rückgabe von mehreren Elementen gleichzeitig zu erhalten! und kann in beiden jQuery-Standardstilen verwendet werden:

 $.outerHTML($("#eleID")); // will return outerHTML of that element and is // same as $("#eleID").outerHTML(); // or $.outerHTML("#eleID"); // or $.outerHTML(document.getElementById("eleID")); 

Für mehrere Elemente

 $("#firstEle, .someElesByClassname, tag").outerHTML(); 

Beispiele für Snippets:

 console.log('$.outerHTML($("#eleID"))'+"\t", $.outerHTML($("#eleID"))); console.log('$("#eleID").outerHTML()'+"\t\t", $("#eleID").outerHTML()); console.log('$("#firstEle, .someElesByClassname, tag").outerHTML()'+"\t", $("#firstEle, .someElesByClassname, tag").outerHTML()); var checkThisOut = $("div").outerHTML(); console.log('var checkThisOut = $("div").outerHTML();'+"\t\t", checkThisOut); $.each(checkThisOut, function(i, str){ $("div").eq(i).text("My outerHTML Was: " + str); }); 
   
This will
be Replaced
At RunTime

Open Console to see results

Sie können es auch einfach so machen

 document.getElementById(id).outerHTML 

ID ist die ID des Elements, nach dem Sie suchen

Ich benutzte Jessicas Lösung (die von Josh bearbeitet wurde), um outerHTML für Firefox zu verwenden. Das Problem ist jedoch, dass mein Code kaputt ging, weil ihre Lösung das Element in ein DIV umwandelte. Das Hinzufügen einer weiteren Codezeile triggerse dieses Problem.

Der folgende Code gibt Ihnen das OuterHTML, das die DOM-Struktur unverändert lässt.

 $jq.fn.outerHTML = function() { if ($jq(this).attr('outerHTML')) return $jq(this).attr('outerHTML'); else { var content = $jq(this).wrap('
').parent().html(); $jq(this).unwrap(); return content; } }

Und benutze es so: $ (“# myDiv”). OuterHTML ();

Hoffe jemand findet es nützlich!

 // no cloning necessary var x = $('#xxx').wrapAll('
').parent().html(); alert(x);

Fiedle hier: http://jsfiddle.net/ezmilhouse/Mv76a/

Wenn das Szenario eine neue Zeile dynamisch anfügt, können Sie Folgendes verwenden:

 var row = $(".myRow").last().clone(); $(".myRow").last().after(row); 

.myrow ist der classnname des

. Es erstellt eine Kopie der letzten Zeile und fügt diese als neue letzte Zeile ein. Dies funktioniert auch in IE7 , während die Methode [0].outerHTML Zuweisungen in ie7 nicht zulässt

node.cloneNode () scheint kaum wie ein Hack. Sie können den Knoten klonen und ihn an ein beliebiges übergeordnetes Element anhängen und es auch manipulieren, indem Sie einzelne Eigenschaften manipulieren, anstatt z. B. reguläre Ausdrücke darauf ausführen zu müssen, oder fügen Sie es dem DOM hinzu und manipulieren es danach.

Das heißt, Sie könnten auch über die Attribute des Elements iterieren, um daraus eine HTML-String-Repräsentation zu erstellen. Es scheint wahrscheinlich, dass so eine outerHTML-function implementiert wird, wenn jQuery hinzugefügt wird.

Beachten Sie, dass Joshs Lösung nur für ein einzelnes Element funktioniert.

Wohl macht “äußeres” HTML nur dann wirklich Sinn, wenn Sie ein einzelnes Element haben, aber es gibt Situationen, in denen es sinnvoll ist, eine Liste von HTML-Elementen zu nehmen und sie in Markup zu verwandeln.

Joshs Lösung wird erweitert um mehrere Elemente:

 (function($) { $.fn.outerHTML = function() { var $this = $(this); if ($this.length>1) return $.map($this, function(el){ return $(el).outerHTML(); }).join(''); return $this.clone().wrap('
').parent().html(); } })(jQuery);

Edit: ein weiteres Problem mit Joshs Lösung behoben, siehe obigen Kommentar.

Eine ähnliche Lösung mit remove() des temporären DOM-Objekts.

Ich habe diesen einfachen Test gemacht, wobei outerHTML tokimon solution (ohne Klon) und outerHTML2 jessica solution (Klon) ist

 console.time("outerHTML"); for(i=0;i<1000;i++) { var html = $("").outerHTML(); } console.timeEnd("outerHTML"); console.time("outerHTML2"); for(i=0;i<1000;i++) { var html = $("").outerHTML2(); } console.timeEnd("outerHTML2"); 

und das Ergebnis in meinem Chrom (Version 20.0.1132.57 (0)) Browser war

outerHTML: 81ms
outerHTML2: 439ms

aber wenn wir tokimon solution ohne die native outerHTML-function verwenden (die jetzt in wahrscheinlich fast jedem Browser unterstützt wird)

wir bekommen

outerHTML: 594ms
outerHTML2: 332ms

und es wird mehr Loops und Elemente in realen Beispielen geben, also wäre die perfekte Kombination

 $.fn.outerHTML = function() { $t = $(this); if( "outerHTML" in $t[0] ) return $t[0].outerHTML; else return $t.clone().wrap('

').parent().html(); }

Die Klonmethode ist also tatsächlich schneller als die Wrap / Unwrap-Methode
(jquery 1.7.2)

Ich habe Volomikes Lösung verwendet, die von Jessica aktualisiert wurde. Ich habe gerade eine Überprüfung hinzugefügt, um zu sehen, ob das Element existiert, und es leer gelassen, falls dies nicht der Fall ist.

 jQuery.fn.outerHTML = function() { return $(this).length > 0 ? $(this).clone().wrap('
').parent().html() : ''; };

Natürlich, benutze es wie:

 $('table#buttons').outerHTML(); 

Sie können eine gute .outerHTML () Option hier https://github.com/darlesson/jquery-outerhtml finden .

Im Gegensatz zu .html (), das nur den HTML-Inhalt des Elements zurückgibt, gibt diese Version von .outerHTML () das ausgewählte Element und seinen HTML-Inhalt zurück oder ersetzt es als .replaceWith () -Methode, aber mit dem Unterschied, dass HTML ersetzt werden kann die Verkettung.

Beispiele finden Sie auch in der obigen URL.

Dies ist großartig um Elemente auf dem dom zu ändern, funktioniert aber NICHT für zB wenn man einen html String in jQuery übergibt:

 $('
Some content
').find('#blog').outerHTML();

Nach ein paar Manipulationen habe ich eine function erstellt, die es erlaubt, zB in HTML Strings zu arbeiten:

 $.fn.htmlStringOuterHTML = function() { this.parent().find(this).wrap('
'); return this.parent().html(); };

Hier ist ein sehr optimiertes OuterHTML Plugin für jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => die anderen 2 schnellen Code Snippets sind nicht kompatibel mit einigen Browsern wie FF <11)

 (function($) { var DIV = document.createElement("div"), outerHTML; if ('outerHTML' in DIV) { outerHTML = function(node) { return node.outerHTML; }; } else { outerHTML = function(node) { var div = DIV.cloneNode(); div.appendChild(node.cloneNode(true)); return div.innerHTML; }; } $.fn.outerHTML = function() { return this.length ? outerHTML(this[0]) : void(0); }; })(jQuery); 

@Andy E => Ich stimme dir nicht zu. outerHMTL braucht keinen Getter UND einen Setter: jQuery gibt uns schon ‘replaceWith’ …

@mindplay => Warum verbindest du dich bei outerHTML? jquery.html gibt nur den HTML-Inhalt des FIRST-Elements zurück.

(Sorry, habe nicht genug Reputation um Kommentare zu schreiben)

Kurz und bündig.

 [].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '') 

oder Ereignis süßer mit Hilfe von Pfeilfunktionen

 [].reduce.call($('.x'), (i,v) => i+v.outerHTML, '') 

oder ohne jQuery überhaupt

 [].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '') 

oder wenn Sie diesen Ansatz nicht mögen, überprüfen Sie das

 $('.x').get().reduce((i,v) => i+v.outerHTML, '') 

$.html = el => $("

"+el+"

").html().trim();

Ich stieß dabei auf eine Antwort auf mein Problem, nämlich dass ich versuchte, eine Tabellenzeile zu entfernen und sie dann am Ende der Tabelle wieder einzufügen (weil ich dynamisch Datenzeilen erstellte, aber ein “Add New” anzeigen wollte) Record ‘Zeile unten eingeben.

Ich hatte das gleiche Problem, da es das innere html zurückgab, also fehlten die TR-Tags, die die ID dieser Zeile enthielten und bedeuteten, dass es unmöglich war, das Verfahren zu wiederholen.

Die Antwort, die ich fand, war, dass die function jquery remove() das Element, das sie entfernt, als Objekt zurückgibt. Also, um eine Zeile zu entfernen und wieder hinzuzufügen, war es so einfach …

 var a = $("#trRowToRemove").remove(); $('#tblMyTable').append(a); 

Wenn Sie das Objekt nicht entfernen, sondern woanders kopieren möchten, verwenden Sie stattdessen die function clone() .

 $("#myNode").parent(x).html(); 

Wo ‘x’ die Knotennummer ist, beginnend mit 0 als erster, sollte den richtigen Knoten bekommen, den Sie wollen, wenn Sie versuchen, einen bestimmten zu bekommen. Wenn Sie untergeordnete Knoten haben, sollten Sie wirklich eine ID auf die gewünschte setzen, um diese auf Null zu setzen. Die Verwendung dieser Methode und kein ‘x’ funktionierte gut für mich.

Einfache Lösung.

 var myself = $('#div').children().parent(); 
 $("#myTable").parent().html(); 

Vielleicht verstehe ich Ihre Frage nicht richtig, aber dadurch wird das HTML-Element des Elternelements des ausgewählten Elements angezeigt.

Ist es das wonach du suchst?