使用 jQuery 获取自己的 HTML 代码 [重复]

Posted 2023-05-07

【中文标题】使用 jQuery 获取自己的 HTML 代码 [重复]

【英文标题】：get self HTML code with jQuery [duplicate]

【发布时间】：2012-01-28 13:47:52

【问题描述】：

<div>
  <a href="#" class="selected">link1</a>  
  <a href="#">link1</a>
</div>

并使用以下

$('.selected').html()我明白了

link1

作为返回值。

如何获取所选DOM元素的完整html代码，在本例中获取

<a href="#" class="selected">link1</a>

改为？

谢谢

【问题讨论】：

是的。只有 $('.selected').parent().html() 会起作用。

@Umesh 如果有一些兄弟姐妹，这将不起作用，这也将包括在内。

@Armin，已接受视图 :)

为什么值不在 HTML 标签内，例如我在 textarea 上运行了相同的查询。文本区域为空。

【参考方案1】：

jQuery 对象：

$('.selected')

成为DOM对象：

$('.selected')[0]

更新：

var str = $("<div />").append($('.selected').clone()).html();
console.log(str);

【讨论】：

这会给他 DOM 对象，而不是 html 字符串...

这个clone在数据很多的时候是不是有点痛苦？

【参考方案2】：

我知道这可以在 Chrome 上运行，其余的不知道：

$("#yourElement")[0].outerHTML

该属性来自 javascript（不是 jQuery），并为您提供所需的内容。

【讨论】：

Mozilla 表示它现在可以从 Firefox 11 开始工作：developer.mozilla.org/en-US/docs/Web/API/Element.outerHTML

适用于 FireFox 47、IE11、Opera 38

【参考方案3】：

我做了一个与上面类似的解决方案，但没有克隆。

var test = $('#test').wrap('<div class="wrap-unwrap"></div>');
var str = test.parent().html();
test.unwrap();
console.log(str);

【参考方案4】：

仅使用outerHTML 属性可能无法在所有浏览器中使用。对于不支持outerHTML 的浏览器，您需要自己对其进行序列化。解释见此贴：How do I do OuterHTML in firefox?

【参考方案5】：

你可以试试这个 jQuery 插件：http://darlesson.com/jquery/outerhtml/