Pobierz surowy HTML węzła w JQuery

Question

Użyłem $("#parent").html(), aby uzyskać wewnętrzny html z #parent, ale jak uzyskać kod HTML rodzica?

Sprawa stosowanie jest, łapię węzeł wejściowy takiego:

var field = $('input'); 

Chciałbym być w stanie uzyskać surowy html tego węzła (<input type='text'>) z czymś takim field.html(), ale zwraca pusty . czy to możliwe?

Answer 1

Albo można utworzyć dodać funkcję JQuery takiego:

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

więc można to zrobić:

$('input').outerHTML(); 

lub

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

dzięki http://yelotofu.com/2008/08/jquery-outerhtml/

Answer 2

To trochę niewygodne zrobić:

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

html() jest analogiczna do innerHTML. Nie ma metody "standardowej" outerHTML. Powyższe zawija element, który chcesz w tymczasowym elemencie, i pobiera go z tego innerHTML.

Answer 3

Można użyć:

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

Że dostanie węzeł #parent, a następnie powrócić kod pierwszego węzła zwrócony (który będzie jedynym w tym przypadku).

Answer 4

To pytanie jest bardzo stary, ale jest teraz proste rozwiązanie:

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

Przykład wartość ciąg html:
< input type = "input" >

Fiddle z nim :
https://jsfiddle.net/u0a1zkL1/3

I , technika wspomniana w komentarzu Optimae działa również:

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