如何使用jquery获取子标签和父标签的html字符串？

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 id="label1"></LABEL></li>的字符串我需要获取包含此<LI id="li2"><LABEL id="label1"></LABEL></LI>的Html字符串

Answer 1

second OuterHTML techniqueAndres 提到（来自 Web Architects' Blog）适用于所有浏览器，因此它可能是一个更好的选择。基本思想是，您可以通过将一个元素设置为另一个元素的 innerHTML 来获取该元素的外部 HTML：

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

只有一点有点棘手 - 确保 clone 您的原始元素，这样您就不会从 DOM 中删除它。

如果您经常这样做或想要对元素数组执行此操作，则可能值得遵循链接示例并制作一个小插件来执行此操作。

Answer 2

您还可以使用 Jeff Sternal 提出的方法编写一个小型 jQuery 插件：

// jQuery plugin 'htmlWithParent'

jQuery(function($) {

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

});

并使用这个小插件，例如：

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