Ich versuche, den HTML-Code eines ausgewählten Objekts mit jQuery abzurufen. Ich bin mir der .html()Funktion bewusst ; Das Problem ist, dass ich den HTML-Code einschließlich des ausgewählten Objekts benötige (in diesem Fall eine Tabellenzeile, in der .html()nur die Zellen innerhalb der Zeile zurückgegeben werden).

Ich habe mich umgesehen und ein paar sehr "hackische" Methoden gefunden, um ein Objekt zu klonen und es einem neu erstellten Div usw. hinzuzufügen, aber das scheint wirklich schmutzig zu sein. Gibt es einen besseren Weg oder bietet die neue Version von jQuery (1.4.2) irgendeine Art von outerHtmlFunktionalität?

2014 Bearbeiten: Die Frage und diese Antwort stammen aus dem Jahr 2010. Zu diesem Zeitpunkt war keine bessere Lösung allgemein verfügbar. Jetzt sind viele der anderen Antworten besser: Eric Hu oder Re Capcha 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("<p>").append(this.eq(0).clone()).html();
};

Ich glaube, dass derzeit (01.05.2012) alle gängigen Browser die OuterHTML-Funktion unterstützen. Es scheint mir, dass dieses Snippet ausreicht. Ich persönlich würde dies auswendig 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 Support-Statistiken fürelement.outerHTML

• Firefox (Gecko): 11 .... Veröffentlicht am 13.03.2012
• Chrome: 0.2 ............... Veröffentlicht am 02.09.2008
• Internet Explorer 4.0 ... Veröffentlicht 1997
• Opera 7 ...................... Veröffentlicht am 28.01.2003
• Safari 1.3 ................... Veröffentlicht am 12.01.2006

Es muss keine Funktion dafür generiert werden. Mach es einfach so:

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

(Die Konsole Ihres Browsers zeigt übrigens an, was protokolliert wird. Die meisten der neuesten Browser seit etwa 2009 verfügen über diese Funktion.)

Die Magie ist dies am Ende:

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

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

Die Art und Weise, wie es funktioniert, ist, dass es jedes aTag nimmt, einen Klon davon im RAM erstellt, mit pTags umschließt, das übergeordnete Element (dh das pTag) abruft und dann das abruftinnerHTML Eigenschaft davon abruft.

BEARBEITEN : Hat Ratschläge eingeholt und divTags in pTags geändert , da weniger getippt wird und dasselbe funktioniert.

Was ist mit : prop('outerHTML')?

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

Und zu setzen:

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

Es hat bei mir funktioniert.

PS : Dies wird in jQuery 1.6 hinzugefügt .

JQuery erweitern:

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

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

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

Seine Art, es zu tun, ist tatsächlich eine VIEL bessere Art, es zu tun, da Sie keinen Klon verwenden. Die Klonmethode ist sehr zeitaufwändig, wenn Sie untergeordnete Elemente haben, und niemand schien sich darum zu kümmern, dass der IE tatsächlich das outerHTMLAttribut hat (ja, der IE hat tatsächlich EINIGE nützliche Tricks im Ärmel).

Aber ich würde sein Skript wahrscheinlich etwas anders erstellen:

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

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

$.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('<div>').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('<div>').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 ermöglicht es uns, ein Argument zu übergeben outerHTML, das sein kann

• eine stornierbare Funktion - function (index, oldOuterHTML) { }- bei der der Rückgabewert zum neuen HTML-Code für das Element wird (sofern nicht falsezurückgegeben).
• Eine Zeichenfolge, die anstelle des HTML-Codes jedes Elements festgelegt wird.

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

Sie können auch get verwenden (Ruft die DOM-Elemente ab, die mit dem jQuery-Objekt übereinstimmen.).

z.B:

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

Als Erweiterungsmethode:

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

Oder

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

Multiple Choice und geben Sie das äußere HTML aller übereinstimmenden Elemente zurück.

$('input').outerHTML()

Rückkehr:

'<input id="input1" type="text"><input id="input2" type="text">'

Um ein FULL jQuery-Plugin als .outerHTMLzu erstellen, fügen Sie jeder js-Datei das folgende Skript hinzu und fügen Sie es nach jQuery in Ihren Header ein:

_{Update Die} neue Version bietet eine bessere Kontrolle sowie einen benutzerfreundlicheren Service für jQuery Selector! :) :)

;(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);

Auf diese Weise können Sie nicht nur die äußere HTML eines Elements abrufen, sondern sogar eine Array-Rückgabe mehrerer Elemente gleichzeitig erhalten! und kann in beiden jQuery-Standardstilen als solche 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();

Snippet-Beispiele:

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); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js"></script>
<div id="eleID">This will</div>
<div id="firstEle">be Replaced</div>
<div class="someElesByClassname">At RunTime</div>
<h3><tag>Open Console to see results</tag></h3>

Sie können es auch einfach so machen

document.getElementById(id).outerHTML

Dabei ist id die ID des Elements, nach dem Sie suchen

Ich habe Jessicas Lösung (die von Josh bearbeitet wurde) verwendet, um OuterHTML für Firefox zum Laufen zu bringen. Das Problem ist jedoch, dass mein Code nicht funktioniert hat, weil ihre Lösung das Element in einen DIV eingewickelt hat. Das Hinzufügen einer weiteren Codezeile löste dieses Problem.

Der folgende Code gibt Ihnen das OuterHTML, wobei der DOM-Baum unverändert bleibt.

$jq.fn.outerHTML = function() {
    if ($jq(this).attr('outerHTML'))
        return $jq(this).attr('outerHTML');
    else
    {
    var content = $jq(this).wrap('<div></div>').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('<div></div>').parent().html(); 
alert(x);

Geige 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);

.myrowist der Klassenname des <tr>. Es erstellt eine Kopie der letzten Zeile und fügt diese als neue letzte Zeile ein. Dies funktioniert auch in IE7 , während die [0].outerHTMLMethode keine Zuweisungen in IE7 zulässt

node.cloneNode () scheint kaum ein Hack zu sein. Sie können den Knoten klonen und an ein beliebiges übergeordnetes Element anhängen und ihn auch bearbeiten, indem Sie einzelne Eigenschaften bearbeiten, anstatt z. B. reguläre Ausdrücke darauf ausführen oder ihn dem DOM hinzufügen und dann nach den Wörtern ändern zu müssen.

Sie können jedoch auch die Attribute des Elements durchlaufen, um eine HTML-Zeichenfolgendarstellung zu erstellen . Es ist wahrscheinlich, dass auf diese Weise jede OuterHTML-Funktion implementiert wird, wenn jQuery eine hinzufügt.

Ich habe die von Jessica aktualisierte Volomike-Lösung verwendet. Fügen Sie einfach eine Überprüfung hinzu, um festzustellen, ob das Element vorhanden ist, und lassen Sie es leer zurückgeben, falls dies nicht der Fall ist.

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

Verwenden Sie es natürlich wie folgt:

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

Eine gute Option für .outerHTML () finden Sie hier https://github.com/darlesson/jquery-outerhtml .

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, jedoch mit dem Unterschied, dass das Ersetzen von HTML von übernommen werden kann die Verkettung.

Beispiele finden Sie auch in der obigen URL.

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

Wahrscheinlich 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 erstellen und sie in Markups umzuwandeln.

Diese Lösung erweitert Joshs Lösung und behandelt 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('<div/>').parent().html();
  }
})(jQuery);

Bearbeiten: Ein weiteres Problem mit Joshs Lösung wurde behoben, siehe Kommentar oben.

Eine andere ähnliche Lösung mit dem Hinzufügen remove()des temporären DOM-Objekts.

Ich habe diesen einfachen Test durchgeführt, wobei OuterHTML eine Tokimon-Lösung (ohne Klon) und OuterHTML2 eine Jessica-Lösung (Klon) ist.

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

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

OuterHTML: 81
ms OuterHTML2: 439 ms

aber wenn wir eine Tokimon-Lösung ohne die native OuterHTML-Funktion verwenden (die jetzt in wahrscheinlich fast jedem Browser unterstützt wird)

wir bekommen

OuterHTML: 594
ms OuterHTML2: 332 ms

und es wird mehr Schleifen und Elemente in Beispielen aus der realen Welt 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('<p>').parent().html(); 
}

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

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

(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 benötigt keinen Getter UND keinen Setter: jQuery gibt uns bereits 'replaceWith' ...

@mindplay => Warum trittst du allen OuterHTML bei? jquery.html gibt nur den HTML-Inhalt des FIRST-Elements zurück.

(Entschuldigung, ich habe nicht genug Ruf, 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 überhaupt ohne jQuery

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

oder wenn Ihnen dieser Ansatz nicht gefällt, überprüfen Sie dies

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

Dies ist mit Vanille-JavaScript ganz einfach ...

document.querySelector('#selector')

Dies ist ideal zum Ändern von Elementen auf dem Dom, funktioniert jedoch NICHT, wenn Sie eine HTML-Zeichenfolge wie folgt in jquery übergeben:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

Nach einigen Manipulationen habe ich eine Funktion erstellt, mit der die oben genannten Funktionen ausgeführt werden können, z. B. für HTML-Zeichenfolgen:

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

$.html = el => $("<div>"+el+"</div>").html().trim();

Ich bin darauf gestoßen, als ich nach einer Antwort auf mein Problem gesucht habe, nämlich, dass ich versucht habe, eine Tabellenzeile zu entfernen und sie dann wieder am Ende der Tabelle hinzuzufügen (weil ich dynamisch Datenzeilen erstellt habe, aber ein 'Neu hinzufügen' anzeigen wollte Geben Sie die Typzeile unten ein.

Ich hatte das gleiche Problem, da es das innerHtml zurückgab und daher die TR-Tags fehlten, die die ID dieser Zeile enthielten und bedeuteten, dass es unmöglich war, den Vorgang zu wiederholen.

Die Antwort, die ich gefunden habe, war, dass die jquery- remove()Funktion das Element, das sie entfernt, tatsächlich als Objekt zurückgibt. So einfach war es, eine Zeile zu entfernen und wieder hinzuzufügen ...

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

Wenn Sie das Objekt nicht entfernen, sondern an eine andere clone()Stelle kopieren möchten, verwenden Sie stattdessen die Funktion.

jQuery-Plugin als Abkürzung, um das gesamte Element HTML direkt abzurufen:

jQuery.fn.outerHTML = function () {
    return jQuery('<div />').append(this.eq(0).clone()).html();
};

Und benutze es so: $(".element").outerHTML();

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

Wobei 'x' die Knotennummer ist, beginnend mit 0 als erster, sollte der richtige Knoten erhalten, wenn Sie versuchen, einen bestimmten zu erhalten. Wenn Sie untergeordnete Knoten haben, sollten Sie wirklich eine ID auf die gewünschte setzen, um diese nur auf Null zu setzen. Mit dieser Methode und ohne 'x' hat es für mich gut funktioniert.

Einfache Lösung.

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

$("#myTable").parent().html();

Vielleicht verstehe ich Ihre Frage nicht richtig, aber dadurch wird das HTML des übergeordneten Elements des ausgewählten Elements abgerufen.

Ist es das, wonach du suchst?