jQuery .add method seemingly not working?

I wonder if anyone can explain this:

$(document).ready(function() {
        var popup = $('<div id="popup"><div class="popup-content"></div></div>');
        var popupContent = popup.children('div');
        var overlay = $('<div id="overlay"></div>');

        console.log(popup);
        console.log(popupContent);
        console.log(overlay);
        console.log(overlay.add(popup).appendTo('body'));
    });

I've added some debugging in there in case you want to test it.

I don't understand why only the overlay gets appended when appendTo() is being called on a jQuery object containing two elements?

Any help would be much appreciated.