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。我需要帮助来获得以下输出： <li class="second">line 2</li>

Answer 1

您需要使用externalHTML属性

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

使用以下命令获取输出： <li class="second">line 2</li>

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

演示

Answer 2

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

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

输出

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

演示版

Answer 3

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

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

这是它的样子-

现在，请注意属性outerHTML具有您的需求！ 您现在可以直接将其称为@satpal建议的属性，如下所示：

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