在JQuery中获取Node的原始HTML

Question

我曾经习惯于$("#parent").html()获取内部html #parent,但是如何获取父本身的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");

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:
<input type ="input">

并且,Optimae评论中提到的技术也有效:

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