在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;