Sto cercando di ottenere l'HTML di un oggetto selezionato con jQuery. Sono a conoscenza del.html() funzione; il problema è che ho bisogno dell'HTML incluso l'oggetto selezionato (una riga di tabella in questo caso, dove .html()restituisce solo le celle all'interno della riga).

Ho cercato in giro e ho trovato alcuni metodi di tipo molto "hacker" per clonare un oggetto, aggiungendolo a un div appena creato, ecc., Ecc., Ma questo sembra davvero sporco. Esiste un modo migliore o la nuova versione di jQuery (1.4.2) offre qualche tipo di outerHtmlfunzionalità?

Modifica 2014: la domanda e questa risposta risalgono al 2010. All'epoca non era ampiamente disponibile una soluzione migliore. Ora, molte altre risposte sono migliori: per esempio Eric Hu o Re Capcha.

Questo sito sembra avere una soluzione per te: jQuery: outerHTML | Yelotofu

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

Credo che attualmente (5/1/2012), tutti i principali browser supportino la funzione outerHTML. Mi sembra che questo frammento sia sufficiente. Personalmente sceglierei di memorizzare questo:

// 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 : statistiche di supporto di base perelement.outerHTML

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

Non è necessario generare una funzione per esso. Fallo così:

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

(A proposito, la console del tuo browser mostrerà ciò che è registrato. La maggior parte dei browser più recenti dal 2009 ha questa funzione.)

La magia è questa alla fine:

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

Il clone significa che non stai effettivamente disturbando il DOM. Eseguilo senza di esso e vedrai i ptag inseriti prima / dopo tutti i collegamenti ipertestuali (in questo esempio), il che è indesiderabile. Quindi sì, usa .clone().

Il modo in cui funziona è che prende ciascuno a tag, ne fa un clone nella RAM, si avvolge con i ptag, ne ottiene il genitore (che significa il ptag) e quindi ne ottiene la innerHTMLproprietà.

EDIT : ha preso consigli e ha cambiato i divtag in ptag perché è meno digitazione e funziona allo stesso modo.

Che dire di prop('outerHTML'):?

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

E per impostare:

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

Ha funzionato per me.

PS : è stato aggiunto in jQuery 1.6 .

Estendi jQuery:

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

E usalo in questo modo: $("#myTableRow").outerHTML();

Concordo con Arpan (13 dicembre 10 5:59).

Il suo modo di farlo è in realtà un modo MOLTO migliore di farlo, poiché non usi il clone. Il metodo clone richiede molto tempo, se si hanno elementi figlio e a nessun altro sembra importare che IE abbia effettivamente ilouterHTML attributo (sì IE ha effettivamente ALCUNI utili trucchi nella manica).

Ma probabilmente creerei la sua sceneggiatura un po 'diversa:

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

Per essere veramente jQuery, potresti voler outerHTML()essere un getter e un setter e avere un comportamento il più simile html()possibile:

$.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 funzionante: http://jsfiddle.net/AndyE/WLKAa/

Questo ci consente di passare un argomento a outerHTML, che può essere

• una funzione cancellabile - function (index, oldOuterHTML) { }- in cui il valore restituito diventerà il nuovo HTML per l'elemento (a meno chefalse venga restituito).
• una stringa, che verrà impostata al posto dell'HTML di ciascun elemento.

Per ulteriori informazioni, consultare i documenti jQuery per html().

Puoi anche usare get (Recupera gli elementi DOM corrispondenti all'oggetto jQuery.).

per esempio:

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

Come metodo di estensione:

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

O

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

Scelta multipla e restituisce l'html esterno di tutti gli elementi corrispondenti.

$('input').outerHTML()

ritorno:

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

Per creare un plugin jQuery COMPLETO come .outerHTML, aggiungi il seguente script a qualsiasi file js e includi dopo jQuery nella tua intestazione:

_{aggiornamento La} nuova versione offre un controllo migliore e un servizio più selettivo per 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);

Ciò ti consentirà non solo di ottenere l'HTML esterno di un elemento, ma anche di ottenere un ritorno Array di più elementi contemporaneamente! e può essere utilizzato in entrambi gli stili standard jQuery in quanto tale:

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

Per più elementi

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

Esempi di snippet:

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>

puoi anche farlo in questo modo

document.getElementById(id).outerHTML

dove id è l'id dell'elemento che stai cercando

Ho usato la soluzione di Jessica (che è stata modificata da Josh) per far funzionare il file HTML esterno su Firefox. Il problema tuttavia è che il mio codice si stava rompendo perché la sua soluzione ha avvolto l'elemento in un DIV. L'aggiunta di un'altra riga di codice ha risolto il problema.

Il codice seguente fornisce l'HTML esterno lasciando invariato l'albero DOM.

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

E usalo così: $ ("# myDiv"). OuterHTML ();

Spero che qualcuno lo trovi utile!

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

Fiddle qui: http://jsfiddle.net/ezmilhouse/Mv76a/

Se lo scenario aggiunge una nuova riga in modo dinamico, è possibile utilizzare questo:

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

.myrowè il nome della classe di <tr>. Crea una copia dell'ultima riga e la inserisce come nuova ultima riga. Questo funziona anche in IE7 , mentre il [0].outerHTMLmetodo non consente assegnazioni in ie7

node.cloneNode () sembra quasi un hack. È possibile clonare il nodo e aggiungerlo a qualsiasi elemento genitore desiderato e anche manipolarlo manipolando le singole proprietà, anziché dover ad esempio eseguire espressioni regolari su di esso o aggiungerlo al DOM, quindi modificarlo dopo le parole.

Detto questo, puoi anche iterare sugli attributi dell'elemento per costruire una rappresentazione di stringa HTML di esso. Sembra probabile che questo sia il modo in cui verrebbe implementata qualsiasi funzione outerHTML se jQuery ne aggiungesse una.

Ho usato la soluzione di Volomike aggiornata da Jessica. Ho appena aggiunto un segno di spunta per vedere se l'elemento esiste e lo ha reso vuoto in caso contrario.

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

Naturalmente, usalo come:

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

Puoi trovare una buona opzione .outerHTML () qui https://github.com/darlesson/jquery-outerhtml .

A differenza di .html () che restituisce solo il contenuto HTML dell'elemento, questa versione di .outerHTML () restituisce l'elemento selezionato e il suo contenuto HTML o lo sostituisce come metodo .replaceWith () ma con la differenza che consente di ereditare il HTML sostitutivo con il concatenamento.

Alcuni esempi possono anche essere visualizzati nell'URL sopra.

Nota che la soluzione di Josh funziona solo per un singolo elemento.

Probabilmente, l'HTML "esterno" ha davvero senso solo quando hai un singolo elemento, ma ci sono situazioni in cui ha senso prendere un elenco di elementi HTML e trasformarli in markup.

Estendendo la soluzione di Josh, questa gestirà più elementi:

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

Modifica: un altro problema con la soluzione di Josh risolto, vedi commento sopra.

Un'altra soluzione simile con l'aggiunta remove()dell'oggetto DOM temporaneo.

Ho fatto questo semplice test con outerHTML come soluzione tokimon (senza clone) e outerHTML2 come soluzione jessica (clone)

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

e il risultato nel mio browser chromium (Versione 20.0.1132.57 (0)) era

outerHTML: 81ms
outerHTML2: 439ms

ma se utilizziamo la soluzione tokimon senza la funzione native HTML esterna (che ora è supportata probabilmente in quasi tutti i browser)

noi abbiamo

outerHTML: 594ms
outerHTML2: 332ms

e ci saranno più loop ed elementi negli esempi del mondo reale, quindi la combinazione perfetta sarebbe

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

quindi il metodo clone è in realtà più veloce del metodo wrap / unwrap
(jquery 1.7.2)

Ecco un plugin HTML esterno molto ottimizzato per jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => gli altri 2 frammenti di codice rapido non sono compatibili con alcuni browser come 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 => Non sono d'accordo con te. outerHMTL non ha bisogno di un getter E di un setter: jQuery ci dà già 'sostituisci con' ...

@mindplay => Perché ti unisci a tutto l'HTML esterno? jquery.html restituisce solo il contenuto HTML del PRIMO elemento.

(Mi dispiace, non ho abbastanza reputazione per scrivere commenti)

Breve e dolce

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

o evento più dolce con l'aiuto delle funzioni freccia

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

o senza jQuery

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

o se non ti piace questo approccio, controlla quello

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

Questo è abbastanza semplice con JavaScript vaniglia ...

document.querySelector('#selector')

Questo è ottimo per cambiare elementi sul dom ma NON funziona per esempio quando si passa una stringa html in jquery in questo modo:

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

Dopo alcune manipolazioni ho creato una funzione che consente a quanto sopra di funzionare in ie per stringhe HTML:

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

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

Mi sono imbattuto in questo mentre cercavo una risposta al mio problema che era che stavo provando a rimuovere una riga della tabella per poi aggiungerla nuovamente in fondo alla tabella (perché stavo creando dinamicamente righe di dati ma volevo mostrare un 'Aggiungi nuovo Record 'digitare la riga in basso).

Ho avuto lo stesso problema, in quanto restituiva innerHtml e quindi mancavano i tag TR, che contenevano l'ID di quella riga e significava che era impossibile ripetere la procedura.

La risposta che ho trovato è stata che la remove()funzione jquery in realtà restituisce l'elemento, che rimuove, come oggetto. Quindi, per rimuovere e aggiungere nuovamente una riga era semplice come questo ...

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

Se non stai rimuovendo l'oggetto ma vuoi copiarlo da qualche altra parte, usa clone()invece la funzione.

Plugin jQuery come scorciatoia per ottenere direttamente l'intero elemento HTML:

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

E usalo in questo modo: $(".element").outerHTML();

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

Dove 'x' è il numero del nodo, che inizia con 0 come primo, dovrebbe ottenere il nodo giusto che desideri, se stai cercando di ottenerne uno specifico. Se hai nodi figlio, dovresti davvero inserire un ID su quello che vuoi, per concentrarti solo su quello. Usando quella metodologia e nessuna 'x' ha funzionato bene per me.

Soluzione semplice.

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

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

Forse non capisco bene la tua domanda, ma questo otterrà l'html dell'elemento genitore dell'elemento selezionato.

È quello che stai cercando?