why p tag is excluding when I select through jQuery

Question

I have a kinda data as like below when I select the p tag using its classname it returns <strong>Packages:</strong> but i want the data to be selected as like this <p class="first"><strong>Packages:</strong> </p>.

alert($('.mydiv').html());
$('.itemize div p:first').css('background-color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemize">
    <p> Order Summery</p>
    <div class="mydiv">
    <p class="first"><strong>Packages:</strong> </p> 
    </div>
   </div>

Can somebody help me to get the whole p tag including <strong> element. Any suggestions, Please !

Answer 1

You have to use OuterHTML , OuterHTML return selector html code.

alert($('.itemize div p.first')[0].outerHTML);
$('.itemize div p:first').css('background-color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemize">
    <p> Order Summery</p>
    <div>
    <p class="first"><strong>Packages:</strong> </p> 
    </div>
   </div>

Answer 2

alert($('.itemize div p.first').get(0).outerHTML);
alert($('.itemize div p.first').prop('outerHTML'));
$('.itemize div p:first').css('background-color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemize">
    <p> Order Summery</p>
    <div>
    <p class="first"><strong>Packages:</strong> </p> 
    </div>
   </div>

Answer 3

Change your jquery code like this with :last :

alert($('.itemize div p:last').html());
$('.itemize div p:last').css('background-color','red');