jQuery 获取 li 和 innerHtml

Question

我正在尝试显示 li 标签的 li 和内部 html。

例如：

    <ul class="for">

       <li>line 1</li>
       <li class="second">line 2</li>
       <li>line 3</li>
       <li>line 4</li>

     </ul>

我想要以下输出：第 2 行

我试过下面的代码，但它只显示 li 的内部 html，不显示 li 标签。

         jQuery(document).ready(function($){
        $tt = jQuery('li.second').html();
          console.log($tt);
            }

输出：第 2 行。我需要帮助才能获得以下输出：<li class="second">line 2</li>

Answer 1

您需要使用 outerHTML 属性

The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.

使用得到输出：<li class="second">line 2</li>

jQuery(document).ready(function(){
    $tt = jQuery('li.second').prop('outerHTML');
    console.log($tt);
});

DEMO

Answer 2

您可以克隆所选的 DOM 元素并附加 .html()。

$tt = $("<li>").append($('li.second').clone()).html();
console.log($tt);

输出

<li class="second">line 2</li>

Demo

Answer 3

如果您记录此元素，您可以看到此元素的所有基础属性-

console.log($('li.second'))

这是它的样子-

现在，请注意属性 outerHTML 有您的需求！您现在可以直接将此属性称为@satpal 建议的-

$('li.second').prop('outerHTML')

jQuery 获取 li 和 innerHtml

jQuery get li and innerHtml

jquery

dom