在JQuery中获取Node的原始HTML

Question

我使用$("#parent").html()来获取#parent的内部html，但是如何获取父本身的html？

用例是，我抓住这样的输入节点：

var field = $('input');

我希望能够使用类似<input type='text'>的内容获取该节点的原始html（field.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

这个问题很老，但现在有一个简单的解决方案：

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

html的示例字符串值：
＆lt;输入类型=＆＃34;输入＆＃34;＆gt;

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

而且，Optimae评论中提到的技术也有效：

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

Answer 4

您可以使用：

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

这将获得#parent节点，然后返回返回的第一个节点的代码（在这种情况下将是唯一的代码）。