2010-05-06 6 views
13

Ho utilizzato $("#parent").html() per ottenere l'html interno di #parent, ma come ottengo l'html del genitore stesso?Ottieni HTML HTML di nodo in JQuery

Il caso d'uso è, io afferrare un nodo di ingresso simili:

var field = $('input'); 

desidero possibile ottenere il codice html grezzo di quel nodo (<input type='text'>) con qualcosa come field.html(), ma che restituisce vuoto . È possibile?

risposta

10

Oppure si potrebbe creare aggiungere una funzione di JQuery come questa:

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

Così si potrebbe fare questo:

$('input').outerHTML(); 

o

$('input').outerHTML("new html"); 

grazie alla http://yelotofu.com/2008/08/jquery-outerhtml/

+0

Non è 'clone()' un problema dovuto ai gestori di eventi? – cletus

7

E 'un po' imbarazzante fare:

var field = $("input"); // assuming there is but 1 
var html = field.wrap("<div>").parent().html(); 
field.unwrap(); 

html() è analogo a innerHTML. Non esiste un metodo "standard" outerHTML. Quanto sopra racchiude l'elemento desiderato in un elemento temporaneo e ottiene lo innerHTML di esso.

2

È possibile utilizzare:

var html = $('#parent')[0]; 

che otterrà il nodo #parent, quindi restituire il codice del primo nodo restituito (che sarà l'unico in questo caso).

7

Questa domanda è molto vecchio, ma v'è ora una soluzione facile:

var html = $('input').prop('outerHTML'); 

Esempio valore di stringa di html:
< input type = "input" >

violino con esso :
https://jsfiddle.net/u0a1zkL1/3

E , la tecnica menzionata nel commento di Optimae funziona anche:

var html = $('input')[0].outerHTML; 
+1

Per chiunque abbia scelto come target l'elemento che ha attivato un evento, anche "var html = event.target.outerHTML" funzionerà. – Optimae