Uważam, że obecnie (5/1/2012) wszystkie główne przeglądarki obsługują funkcję outerHTML. Wydaje mi się, że ten fragment jest wystarczający. Ja osobiście wybrałbym zapamiętanie tego:

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

Edytuj: podstawowe statystyki wsparcia dla element.outerHTML

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

Nie ma potrzeby generowania dla niego funkcji. Po prostu zrób to tak:

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

(konsola przeglądarki pokaże, co jest zalogowane, przy okazji. Większość najnowszych przeglądarek od około 2009 roku ma tę funkcję.)

Magia jest taka na końcu:

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

The way działa to tak, że pobiera każdy znacznik a, tworzy jego klon w pamięci RAM, zawija znaczniki p, pobiera jego rodzica (czyli znacznik p), a następnie otrzymuje jego właściwość innerHTML.

EDIT : poradziłem sobie i zmieniłem tagi div na Tagi p, ponieważ mniej pisze i działa tak samo.

A co z: prop('outerHTML')?

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

I ustawić:

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

PS : dodano w jQuery 1.6.

Extend jQuery:

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

I użyj go tak: $("#myTableRow").outerHTML();

Zgadzam się z Arpanem (13.12.10 17:59)

Ale pewnie stworzyłbym jego skrypt nieco inaczej:

$.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;
    }
};

Aby być prawdziwie jQuery-esque, możesz chcieć outerHTML() być getterem i setterem i mieć jego zachowanie jak najbardziej podobne do html():

$.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;
}

Demo robocze: http://jsfiddle.net/AndyE/WLKAa/

To pozwala nam przekazać argument outerHTML, który może być

• funkcja cancellable - function (index, oldOuterHTML) { } - gdzie zwracana wartość stanie się nowym HTML dla elementu (chyba że zostanie zwrócona false).
• ciąg, który zostanie ustawiony w miejsce HTML każdego elementu.

Aby uzyskać więcej informacji, zobacz dokumenty jQuery dla html().

Możesz również użyć get (pobrać elementy DOM pasujące do obiektu jQuery.).

E. g:

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

Jako metoda rozszerzenia:

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

Lub

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

Wielokrotnego wyboru i zwraca Zewnętrzny kod html wszystkich dopasowanych elementów.

$('input').outerHTML()

Return:

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

Aby utworzyć pełną wtyczkę jQuery jako .outerHTML, Dodaj następujący skrypt do dowolnego pliku js i dołącz po jQuery do nagłówka:

_aktualizacja nowa wersja ma lepszą kontrolę, a także bardziej przyjazną obsługę selektora jQuery! :)

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

To pozwoli Ci nie tylko uzyskać outerHTML jednego elementu, ale nawet uzyskać zwrot tablicy wielu elementów naraz! i może być używany zarówno w standardowych stylach jQuery jak takie:

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

Dla wielu elementów

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

Przykłady Fragmentów:

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>

Możesz też zrobić to w ten sposób

document.getElementById(id).outerHTML

Gdzie id jest identyfikatorem elementu, którego szukasz

Użyłem rozwiązania Jessiki (które zostało edytowane przez Josha), aby uzyskać outerHTML do pracy na Firefoksie. Problem jednak polega na tym, że mój kod łamał się, ponieważ jej rozwiązanie zawijało element w DIV. Dodanie jeszcze jednej linii kodu rozwiązało ten problem.

Poniższy kod daje outerHTML pozostawiając drzewo DOM bez zmian.

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

I użyj tego w następujący sposób: $("#myDiv").outerHTML ();

Mam nadzieję, że ktoś uzna to za przydatne!

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

Http://jsfiddle.net/ezmilhouse/Mv76a/

Jeśli scenariusz dołącza nowy wiersz dynamicznie, możesz użyć tego:

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

.myrow jest nazwą klasy <tr>. Tworzy kopię ostatniego wiersza i wstawia go jako nowy ostatni wiersz. Działa to również w IE7 , podczas gdy metoda [0].outerHTML nie pozwala na przypisanie w ie7

Node.cloneNode() Możesz sklonować węzeł i dołączyć go do dowolnego elementu nadrzędnego, a także manipulować nim poprzez manipulowanie poszczególnymi właściwościami, zamiast np. uruchamiać na nim wyrażenia regularne lub dodawać go do DOM, a następnie manipulować nim po słowach.

To powiedziawszy, możesz również iterować nad atrybutami elementu , aby skonstruować reprezentację ciągu HTML. Wydaje się prawdopodobne, że tak będzie wyglądać każda funkcja outerHTML zaimplementowano jQuery, aby dodać jeden.

Użyłem rozwiązania Volomike zaktualizowanego przez Jessicę. Po prostu dodałem sprawdzanie, aby sprawdzić, czy element istnieje, i sprawiłem, że zwraca puste w przypadku, gdyby nie.

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

Oczywiście, użyj go tak:

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

Możesz znaleźć dobry .outerHTML () opcja tutaj https://github.com/darlesson/jquery-outerhtml .

W przeciwieństwie .html (), która zwraca tylko zawartość HTML elementu, ta wersja .outerHTML () zwraca wybrany element i jego zawartość HTML lub zastępuje go jako .metoda replaceWith (), ale z tą różnicą, że zastępujący HTML może być dziedziczony przez łańcuch.

Przykłady można również zobaczyć w powyższym adresie URL.

Zauważ, że rozwiązanie Josha działa tylko dla jednego elementu.

Prawdopodobnie" zewnętrzny " HTML ma sens tylko wtedy, gdy masz pojedynczy element, ale są sytuacje, w których warto wziąć listę elementów HTML i zamienić je w znaczniki.

Rozszerzając rozwiązanie Josha, ten będzie obsługiwał wiele elementów:

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

Edit: Naprawiono kolejny problem z rozwiązaniem Josha, zobacz komentarz powyżej.

Podobne rozwiązanie z dodanym remove() tymczasowego obiektu DOM.

Zrobiłem ten prosty test z outerHTML jako tokimon solution (bez klonu), a outerHTML2 jako jessica solution (klon)

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

I wynik w mojej przeglądarce chromium (Wersja 20.0.1132.57 (0)) był

OuterHTML: 81ms
outerHTML2: 439ms

Ale jeśli użyjemy rozwiązania tokimon bez natywnej funkcji outerHTML (która jest teraz obsługiwana prawdopodobnie w prawie każdej przeglądarce)

Otrzymujemy

OuterHTML: 594ms
outerHTML2: 332ms

Oraz będzie więcej pętli i elementów w rzeczywistych przykładach, więc idealna kombinacja będzie

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

Więc metoda klonowania jest w rzeczywistości szybsza niż metoda zawijania/rozpakowywania
(jquery 1.7.2)

Oto bardzo zoptymalizowana wtyczka outerHTML do jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 2 inne szybkie fragmenty kodu nie są kompatybilne z niektórymi przeglądarkami, takimi jak FF

(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 = > nie zgadzam się z Tobą. outerHMTL nie potrzebuje gettera i settera: jQuery już daje nam 'replaceWith'...

@mindplay = > dlaczego dołączasz do wszystkich outerHTML? jquery.html zwraca tylko zawartość HTML pierwszego elementu.

(Sorry, don ' t mieć wystarczającą reputację, aby pisać komentarze)

Krótko i słodko.

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

Lub zdarzenie bardziej słodkie z pomocą funkcji strzałek

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

Lub bez jQuery w ogóle

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

Lub jeśli nie podoba Ci się to podejście, sprawdź, że

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

Jest to dość proste z vanilla JavaScript...

document.querySelector('#selector')

Jest to świetne do zmiany elementów w dom, ale nie działa w ie podczas przekazywania w łańcuchu html do jquery w taki sposób:

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

Po pewnej manipulacji stworzyłem funkcję, która pozwala na działanie powyższego w ie dla łańcuchów html:

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

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

Natknąłem się na to, szukając odpowiedzi na mój problem, który polegał na tym, że próbowałem usunąć wiersz tabeli, a następnie dodać go z powrotem na dole tabeli (ponieważ dynamicznie tworzyłem wiersze danych, ale chciałem pokazać wiersz typu "Dodaj nowy rekord" na dole).

Miałem ten sam problem, ponieważ zwracano innerHtml, więc brakowało znaczników TR, które trzymały identyfikator tego wiersza i oznaczało, że nie można było powtórzyć procedury.

Znalazłem odpowiedź, że funkcja jquery remove() Zwraca element, który usuwa, jako obiekt. Tak więc, aby usunąć i ponownie dodać wiersz, było to tak proste...

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

Jeśli nie usuwasz obiektu, ale chcesz go skopiować gdzie indziej, użyj zamiast tego funkcji clone().

JQuery plugin jako skrót do bezpośredniego pobrania całego elementu HTML:

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

I użyj go tak: $(".element").outerHTML();

Czysty JavaScript:

var outerHTML = function(node) {
  var div = document.createElement("div");
  div.appendChild(node.cloneNode(true));
  return div.innerHTML;
};

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

Gdzie ' x ' jest numerem węzła, zaczynającym się od 0 jako pierwszego, powinien dostać odpowiedni węzeł, jeśli próbujesz uzyskać konkretny. Jeśli masz węzły podrzędne, naprawdę powinieneś umieścić ID na tym, który chcesz, aby po prostu zerować na tym. Użycie tej metodologii i żadne " x " nie zadziałało dobrze.

Proste rozwiązanie.

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

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

Być może nie rozumiem poprawnie twojego pytania, ale to spowoduje, że wybrany element rodzica otrzyma kod html.