Come posso ottenere il markup di un elemento, incluso se stesso usando jQuery?

Question

So che posso racchiuderlo .html() in un tag, ma l'elemento stesso ha un ID, una classe e così via dinamicamente. Come faccio a ottenere jQuery per restituire il markup dell'elemento incluso se stesso?

Answer 1

Per quanto ne so, non v'è alcun supporto "outerHTML" direttamente in jQuery, ma è possibile scrivere una funzione per emulare (in browser diversi da IE), oppure utilizzare this plugin:

// this will return the element and it's mark-up, of an element 
// with the id myTag 
var outer = $('#myTag').outerHTML(); 

Ovviamente Brandon non è l'unica implementazione .. sono sicuro che si potrebbe anche venire con altre implementazioni intelligenti ..

EDIT

Se siete appassionati di evitare le chiamate da aggiungere, forse si potrebbe provare qualcosa di simile ..

function getOuterHTML(el) 
{ 
    var wrapper = ''; 

    if(el) 
    { 
     var inner = el.innerHTML; 
     var wrapper = '<' + el.tagName; 

     for(var i = 0; i < el.attributes.length; i++) 
     { 
      wrapper += ' ' + el.attributes[i].nodeName + '="'; 
      wrapper += el.attributes[i].nodeValue + '"'; 
     } 
     wrapper += '>' + inner + '</' + el.tagName + '>'; 
    } 
    return wrapper; 
} 


// now, to replicate the sample above 
var outer = getOuterHTML($('#myTag')); 

L'unica cosa che è, io non sono sicuro se tutti i browser supportano la matrice attributi .. ma so che quelli mozilla-famiglia fanno, e IE ha il supporto nativo per outerHTML .. provalo (per quelli che non supportano l'array attributes puoi usare il metodo precedente che usa gli allegati)

Answer 2

This blog post potrebbe aiutarvi.

egli descrive una tecnica che assomiglia a questo:

var html = $('<div>').append($('#top').clone()).remove().html() 

Questa clona il div di interesse, lo aggiunge ad un div involucro, e poi si fa l'HTML del involucro - che equivale al codice HTML originale il primo div

Il suo suggerimento di circondarlo inizialmente in un div involucro dichiarato sembra un modo migliore per andare comunque. Allora non avresti bisogno di preoccuparti di tutto questo.

Answer 3

Senza alcun codice, seleziona l'elemento, seleziona il primo elemento interno, ottieni il suo genitore (quello che vuoi) quindi avvolgilo attorno alla selezione originale di youElement.html().

Answer 4

Uhm, non è necessario utilizzare un plugin, sono sicuro che si può provare

// this uses the jquery selectors, then returns the DOM element, 
// which then u can use the standard outterHTML... 
$('#myelement').get(0).outerHTML; 

Edit: se i vostri selettori di jQuery sono corrispondenti più di un elemento, è possibile ciclo attraverso di loro, fare riferimento per la documentazione jQuery per gli esempi

Answer 5

questo funziona bene:

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

Answer 6

po 'tardi per questa domanda. Se usi jQuery per trovare un oggetto, puoi usare il seguente codice per ottenere l'HTML esterno.

HTML:

<div class="obj"> 
    <a href="#" class="link">Link</a> 
</div> 

jQuery:

var $obj = $('.obj .link'); 
var outerHTML = $obj[0].outerHTML; 

che sarà in uscita <a href="#" class="link">Link</a>. Testato su ultime versioni di Chrome, ultime versioni di Firefox e IE11.Ecco un link a una codepen: http://codepen.io/aj372/pen/ZLmYbj