在JQuery中獲取節點的原始HTML

Question

我已使用$("#parent").html()獲取#parent的內部html，但是如何獲取父級本身的html？

的使用情況是，我抓住這樣的輸入節點：

var field = $('input'); 

我希望能得到該節點（<input type='text'>）的東西，如field.html()的原始的HTML，但返回空。這可能嗎？

Answer 1

或者你可以創建添加jQuery函數是這樣的：

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

，所以你可以這樣做：

$('input').outerHTML(); 

或

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

感謝http://yelotofu.com/2008/08/jquery-outerhtml/

Answer 2

這是有點尷尬的事：

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

html()很是類似innerHTML。沒有「標準」outerHTML方法。上面將你想要的元素包裝在一個臨時元素中，並獲取它的innerHTML。

Answer 3

您可以使用：

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

這將得到#parent節點，則返回第一個節點的返回代碼（這將是在這種情況下，只有一個）。

Answer 4

這個問題是很老的，但現在有一個簡單的解決方案：

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

實施例的字符串值的html：
< INPUT TYPE = 「輸入」 >

撥弄它：
https://jsfiddle.net/u0a1zkL1/3

而且，Optimae的評論中提到的技術也有效：

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