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'，这表明整个列表项确实包含在返回的对象中..那么如何从该对象获取完整的代码呢？

我想从我的对象中获取一个String：<li id="the_list_item"><img src="some_img"></li>，但找不到相应的方法。

Answer 1

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

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

Answer 2

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

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

...做你的事，然后解开：

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

Answer 3

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

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

Answer 4

这是我的解决方案，不需要jQuery！

// Get a reference to the element by its ID.
var oEl = document.getElementById('the_list_item');
// Getting the outerHTML of an element:
var sOuterHTML = oEl.outerHTML;
 alert( sOuterHTML );

或者，它可以通过jQuery获取元素的引用，然后获取outerHTML。

var sOuterHTML = $('#the_list_item')[0].outerHTML;
alert( sOuterHTML );
// or
var  sOuterHTML = $('#the_list_item').get(0).outerHTML;
alert( sOuterHTML );

Answer 5

jQuery中没有“外部html”等价物，但这可能会有所帮助： http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html

Answer 6

不幸的是，外部HTML解决方案（上面接受的解决方案）在FireFox 9 / Windows 7 / JQuery 1.7上对我不起作用...

根据Chetan Sastry（上面的回答），这里有一些对我有用的东西：

var el = jQuery('#the_list_item').first();
var outerHtml = jQuery('<div>').append(el).html();

Answer 7

您是否尝试过$("#the_list_item").parent().html()？

Answer 8

在这里你可以找到jQuery outerHtml插件代码形式的一个很好的解决方案：http://yelotofu.com/2008/08/jquery-outerhtml/

Answer 9

创建一个新的div DOM对象并附加div的克隆，然后获取包装div的内容，最后删除创建的DOM对象。

var html = $('<div>').append($('#the_list_item').clone()).remove().html();

Answer 10

有插件。只需谷歌“jQuery outerhtml”。其中大部分背后的想法是克隆元素，将其附加到空div并获取div的html。

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

10 个答案: