Полный HTML-объект, возвращаемый jQuery-селектором

с учетом этого html:

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

и этот selectior:

$("#the_list_item")

Я хочу получить полный html из возвращаемого объекта селектором jQuery.

Использование:

$("#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> из моего объекта, но не могу найти способ сделать это.

Ответы

Ответ 1

Один из способов - создать собственную оболочку:

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

... сделайте свою вещь, затем разверните:

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

Ответ 2

Я не уверен, что это работает, но это может стоить того:

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

Ответ 3

Здесь мое решение, не требуется 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 );

Ответ 5

К сожалению, решение outerHTML (принятое решение выше) не работает для меня в FireFox 9/Windows 7/JQuery 1.7...

Вот что-то, что сработало для меня, по словам Четана Састри (ответ выше):

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

Ответ 6

Оставляя на всякий случай, что кто-то в настоящее время все еще ищет это.
Полное решение jQuery: 

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

Ответ 7

Вы пробовали $("#the_list_item").parent().html()?

Ответ 9

Создание нового объекта div DOM и добавление клона div, затем получение содержимого завернутого div и окончательное удаление созданного объекта DOM.

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

Ответ 10

Для этого есть плагины. Просто Google для "jQuery outerhtml". Идея, лежащая в основе большинства из них, заключается в клонировании элемента, добавлении его в пустой div и получении этого div html.