Frage 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 bewusst .html() Funktion; Das Problem ist, dass ich das HTML einschließlich des ausgewählten Objekts brauche (in diesem Fall eine Tabellenzeile) .html() gibt nur die Zellen innerhalb der Zeile zurück).

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 Funktionalität?


734
2018-03-10 19:09


Ursprung


Antworten:


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("<p>").append(this.eq(0).clone()).html();
};

176
2018-03-10 19:26



Ich glaube, dass derzeit (1. 5. 2012) alle gängigen Browser die OuterHTML-Funktion 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

BEARBEITEN: Grundlegende Unterstützungsstatistiken zum element.outerHTML


620
2018-05-01 23:00



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

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

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

Die Magie ist das am Ende:

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

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

Die Art und Weise, wie es funktioniert, ist, dass es jedes dauert a Tag, macht einen Klon davon im RAM, Wraps mit p Tags, bekommt das Elternteil davon (gemeint ist das p Tag), und erhält dann die innerHTML Eigentum davon.

BEARBEITEN: Hat Ratschläge und hat sich geändert div Tags zu p Tags, weil es weniger tippen und funktioniert genauso.


338
2018-01-19 21:50



Wie wäre es 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 hinzugefügt jQuery 1.6.


130
2018-03-19 08:06



Erweitern Sie jQuery:

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

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


88
2017-11-15 02:27



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 Kind-Elemente haben, und niemand sonst schien zu interessieren, dass IE tatsächlich die outerHTML Attribut (ja IE haben 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('<div/>').parent().html();
        $t.unwrap();
        return content;
    }
};

42
2018-03-10 12:49



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

$.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 erlaubt uns, ein Argument zu übergeben outerHTML, welches sein kann

  • eine auflösbare Funktion - function (index, oldOuterHTML) { } - wobei der Rückgabewert der neue HTML-Code für das Element wird (es sei denn, false ist zurück gekommen).
  • eine Zeichenfolge, die an Stelle des HTML-Codes jedes Elements gesetzt wird.

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


17
2017-09-07 16:39



Sie können auch verwenden bekommen (Rufen Sie 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
  })
};

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:

["<input id="input1" type="text">", "<input id="input2" type="text">"]

14
2018-04-23 10:33



Um ein vollständiges jQuery-Plugin zu erstellen .outerHTMLFügen Sie das folgende Skript zu jeder js-Datei hinzu und fügen Sie es nach jQuery in Ihre Kopfzeile ein:

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


9
2018-03-21 18:37



Sie können es auch einfach so machen

document.getElementById(id).outerHTML

ID ist die ID des Elements, nach dem Sie suchen


8
2017-11-18 17:46