如何使用jQuery获取元素的外部HTML？

使用jQuery获取元素的外部HTML可以轻松地将HTML代码提取出来。在jQuery中，可以使用 outerHTML 属性获取元素的外部HTML。

使用jQuery的outerHTML属性

outerHTML 属性返回一个包含整个元素（包括其自身和子元素）的HTML字符串。以下是如何使用 outerHTML 属性获取元素的外部HTML：

// 获取元素的外部HTML
var elementHTML = $('#myElement')[0].outerHTML;

在上面的示例中，我们使用 $ 函数选择 myElement 元素，并将其索引为 0，以使用对应的DOM元素，而不是jQuery对象。然后使用 outerHTML 属性来获取该元素的外部HTML字符串，并将其分配给 elementHTML 变量。

示例

假设我们有以下HTML代码：

<div id="outer">
  <h1>This is the outer div</h1>
  <p>This is some text inside the div.</p>
</div>

现在，我们想将外部 div 元素的HTML代码提取出来。我们可以使用以下JavaScript代码：

// 获取外部div元素的外部HTML
var outerHTML = $('#outer')[0].outerHTML;

// 输出结果
console.log(outerHTML);

上面的代码将输出以下HTML字符串：

<div id="outer">
  <h1>This is the outer div</h1>
  <p>This is some text inside the div.</p>
</div>

这就是我们在HTML代码中找到的完整 div 元素的外部HTML。

结论

在本文中，我们学习了如何使用jQuery的 outerHTML 属性获取元素的外部HTML。通过使用这个属性，我们可以轻松地从HTML代码中提取元素的外部HTML字符串。