jquery - attr vs prop

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<input id="firstName" type="text" value="" />
<br/>
<span>Is in stock: </span><input id="isInStock" type="checkbox" />
<button id="goBtn" class="btn btn-info">Go</button>
<ul id="output"></ul>

JavaScript

$('#goBtn').click(function() {
    //('output').append('<li/>').text = $('#isInStock').attr('checked');
    var text1 = "$('#isInStock').attr('checked') === " + $('#isInStock').attr('checked');

    $("<li />", {
        "text": text1
    }).appendTo($('#output'));

    var text2 = "$('#isInStock').prop('checked') === " + $('#isInStock').prop('checked');

    $("<li />", {
        "text": text2
    }).appendTo($('#output'));
});