Как получить HTML-строку дочернего тега и родительского тега с помощью jquery?

Question

Например, если у меня есть список HTML ul, например

<ul id="ulIdentificator"> 
    <li id="li0"></li>
    <li id="li1"></li>
    <li id="li2"><label id="label1"></label></li>   
</ul>

Если я использую jQuery, как это

var htmlStr = $("#li2").html();

Результатом будет только строка, содержащая тег label <LABEL id="label1"></LABEL></li> Мне нужно получить строку Html, которая содержит <LI id="li2"><LABEL id="label1"></LABEL></LI>

Answer 1

Второй метод OuterHTML , который упоминает Андрес (из блога веб-архитекторов), работает во всех браузерах, так что это, вероятно, лучший выбор. Основная идея заключается в том, что вы можете получить внешний HTML-код элемента, сделав его внутренним HTML-элементом другого элемента:

var outerHtml = $("<div/>").append($("#li2").clone()).html();

Есть только один немного хитрый бит - убедитесь, что clone ваш оригинальный элемент, чтобы вы не удаляли его из DOM.

Если вы делаете это часто или хотите делать это с массивами элементов, вероятно, стоит следовать связанному примеру и создать для этого небольшой плагин.

Answer 2

Вы также можете написать небольшой плагин jQuery с предложенным методом от Джеффа Стерна:

// jQuery plugin 'htmlWithParent'

jQuery(function($) {

  $.fn.htmlWithParent = function() { return $j("<div/>").append($j(this).clone()).html(); };

});

и используйте этот небольшой плагин cutom, например:

var htmlCode = $("<p><span>Helo world!</span></p>");

// Return only child nodes: <span>Helo world!</span>
var output1 = $(htmlCode).html();

// Return whole HTML code (childs + parent): <p><span>Helo world!</span></p>
var output2 = $(htmlCode).htmlWithParent();

Очень полезный метод. ;)

Answer 3

jQuery OuterHTML , OuterHTML II