How to get parent as well as child's html in jquery

Question

<ul class="messages">
<li class="error-msg">
    <ul>
        <li><span>Error.</span></li>
    </ul>
</li>
</ul>

 $(document).ready(function(){
    if($("ul.messages").length > 0){
        var MessageContent = $("ul.messages").html();
        alert(MessageContent);
    }
});

Above jquery code alert inner li of ul having class messages. I want entire html but in reference with class messages.

fiddle here

Answer 1

Try,

$(document).ready(function(){
    if($("ul.messages").length > 0){
        var MessageContent = $("ul.messages")[0].outerHTML;
        alert(MessageContent);
    }
});

DEMO