2009-12-07 13 views
22

Esiste un modo valido per stampare un oggetto jQuery come puro HTML?Stampa oggetto jQuery come HTML

es:

<img src="example.jpg"> 

<script> 
var img = $('img').eq(0); 
console.log(img.toString()); 
</script> 

toString() non funziona in questo modo. Ho bisogno la stringa equivalente HTML, vale a dire:

<img src="example.jpg">

risposta

6

Se è necessario stampare l'oggetto in formato HTML, utilizzare questa estensione outerHTML o questo outerHTML.

Aggiornamento

Aggiornamento link per inserire il codice per il secondo link:

$.fn.outerHTML = function(){ 

    // IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning 
    return (!this.length) ? this : (this[0].outerHTML || (
     function(el){ 
      var div = document.createElement('div'); 
      div.appendChild(el.cloneNode(true)); 
      var contents = div.innerHTML; 
      div = null; 
      return contents; 
    })(this[0])); 

} 
+0

quindi, ho davvero bisogno di un'estensione per questo? fa lo stesso dell'esempio di Magnar, tranne la clonazione prima dell'analisi. – David

+0

se la stessa cosa, ma è necessario clonarlo per continuare a spostare gli elementi nel DOM e rimuoverlo. –

15

Si potrebbe avvolgere e quindi utilizzare HTML:

var img = $('img').eq(0); 
console.log(img.wrap("<span></span>").parent().html()); 
+0

funziona, ma sembra un po 'imbarazzante ... c'è un modo migliore? – David

+3

Non modificherà il DOM? Dovremmo prima clonare 'img'? – Casebash

22

$('img')[0].outerHTML

vi darà il codice HTML della prima img sulla pagina . Dovrai quindi utilizzare un ciclo for per ottenere l'HTML di tutte le immagini, o inserire un ID sull'immagine e specificarlo solo nel selettore jQuery.

+0

o, se conoscessi l'elemento specifico nel DOM che volevi l'HTML per ... $ ('# some .selector') [0] .outerHTML Assicurati di avvolgerlo in un if ($ (' #some .selector '). length) – bmarti44