jQuery选择器返回的完整HTML对象

Question

给出这个HTML:

<li id="the_list_item"><img src="some_img"></li>

而这个选择:

$("#the_list_item")

我想通过jQuery选择器从对象返回获取完整的html.

使用:

$("#the_list_item").html()

...只是给我内在的HTML(<img src="some_img">部分)

但是由于:

$("#the_list_item").attr("id")

给我'the_list_item',这表明整个列表项确实包含在返回的对象中..那么如何从该对象获取完整的代码？

我想<li id="the_list_item"><img src="some_img"></li>从我的对象中获取一个String:但是找不到这样做的方法.

Answer 1

我不确定这是否有效,但它可能值得一试:

var html = $('#the_list_item')[0].outerHTML;
alert(html);

Answer 2

一种方法是创建自己的包装器:

$("#the_list_item").wrap('<div>').parent().html();

...做你的事,然后解开:

$("#the_list_item").unwrap();

如果你想避免以任何方式影响原始元素，你可以在包装它之前克隆它：`$("#the_list_item").clone().wrap('<div>').parent().html() ;` (2认同)
@tobuslieven 自从我写下最初的答案以来的五年里，事情已经发生了足够的变化，我通常会在这一点上推荐 externalHTML，如下面的 Tatu Ulmanen 的答案所示。（[参见：CanIUse outerHTML](http://caniuse.com/#search=outerhtml)）。与往常一样，需要注意的是 IE，特别是 IE8，所以如果您必须支持旧的 IE，您仍然需要一种类似上述方法的包装器方法。 (2认同)

Answer 3

以防万一，时下仍有人在寻找这个。
完整的jQuery解决方案：

$('#the_list_item').prop('outerHTML');