jquery 获取 outerHtml 包含当前节点本身的代码

获取包含当前节点本身的 outerHtml 代码是 jQuery 中一个比较常用的需求。下面是获取 outerHtml 的两种方法。

方法一：使用原生 JavaScript 的 outerHTML 属性

在使用原生 JavaScript 的 outerHTML 属性获取 outerHtml 代码时，可以使用 jQuery 的 $() 选择器先获取到一个或多个 DOM 节点，并使用原生 JavaScript 的对象属性 outerHTML 获取它们的 outerHtml 代码。

// 获取单个元素的 outerHtml 代码
var outerHtml = $('#my-element').get(0).outerHTML;

console.log(outerHtml); // 输出：<div id="my-element">Hello world!</div>

// 获取多个元素的 outerHtml 代码，使用 each 方法遍历
$('.my-class').each(function(index, element) {
  var outerHtml = element.outerHTML;
  console.log(outerHtml); // 输出：<div class="my-class">Hello world!</div>
});

方法二：使用 jQuery 的 .clone() 和 .wrap() 方法

在使用 jQuery 的 .clone() 和 .wrap() 方法获取 outerHtml 代码时，首先通过 $() 选择器获取一个或多个 DOM 节点，并使用 .clone() 方法创建一个副本。然后使用 .wrap() 方法在副本外包裹一个新的 DOM 元素，这个新元素的内部包含了副本节点，然后使用 .wrap() 方法返回副本节点的 jQuery 对象，最后使用 .parent().html() 方法获取外层的 outerHtml 代码。

// 获取单个元素的 outerHtml 代码
var $myElement = $('#my-element').clone().wrap('<div>').parent();
var outerHtml = $myElement.html();

console.log(outerHtml); // 输出：<div id="my-element">Hello world!</div>

// 获取多个元素的 outerHtml 代码，使用 each 方法遍历
$('.my-class').each(function(index, element) {
  var $element = $(element);
  var $clone = $element.clone().wrap('<div>').parent();
  var outerHtml = $clone.html();
  console.log(outerHtml); // 输出：<div class="my-class">Hello world!</div>
});

总的来说，获取包含当前节点的 outerHtml 代码可以使用原生 JavaScript 的 outerHTML 属性或者使用 jQuery 的 .clone() 和 .wrap() 方法。两种方法都可行，可以根据自己的习惯和需求选择使用。