jQuery find and get html

Question

I'm trying to grab the entire html of .spec including the <ul class="spec"></ul> but using the below code it grabs only the children of .spec

HTML

<div class="single-vacancy">
    <p class="title"><strong>This title</strong></p>
    <span class="read-more">View Vacancy</span>
    <ul class="spec">
        <li>List</li>
        <li>List</li>
        <li>List</li>
    </ul>
</div>

jQuery

$('.read-more').click(function() {
    var role = $(this).next('.spec').html();
});

Answer 1

Or the jquery way:

var role = $(this).next('.spec').prop('outerHTML');

Using html() returns only the content HTML (innerHTML) not the outer HTML.