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);
            }

输出：line2 .i需要帮助才能获得以下输出：<li class="second">line 2</li>

Answer 1

您需要使用outerHTML属性

  

元素DOM接口的outerHTML属性获取描述元素（包括其后代）的序列化HTML片段。可以将其设置为使用从给定字符串解析的节点替换元素。

使用以获取输出：<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')