在 JQuery 中获取 Node 的原始 HTML答案

【问题标题】：Get Raw HTML of Node in JQuery在 JQuery 中获取 Node 的原始 HTML
【发布时间】：2010-05-06 08:35:56
【问题描述】：

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

用例是，我像这样抓取一个输入节点：

var field = $('input');

我希望能够使用 field.html() 之类的内容获取该节点 (<input type='text'>) 的原始 html，但返回的是空的。这可能吗？

【问题讨论】：

【解决方案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");

【讨论】：

【解决方案2】：

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

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

html 的示例字符串值：

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

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

【讨论】：

【解决方案3】：

这样做有点尴尬：

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

html() 类似于innerHTML。没有“标准”outerHTML 方法。上面将你想要的元素包装在一个临时元素中，并获取它的innerHTML。

【讨论】：

【解决方案4】：

你可以使用：

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

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

【讨论】：