Creating and editing an iFrame contents with JavaScript not working in IE

I use the following code to create an iframe and then add a form to it:

var downloadFrame = document.getElementById('downloadFrame');

            if (downloadFrame === null) {
                downloadFrame = document.createElement('iframe');
                downloadFrame.id = 'downloadFrame';
                downloadFrame.style.display = 'none';
                document.body.appendChild(downloadFrame);

                $(downloadFrame).contents().find('body')
                    .append('<form method="post">' +
                                '<input type="hidden" id="JournalText" name="JournalText">' +
                                '<input type="hidden" id="url" name="url">' +
                                '<input type="hidden" id="Values" name="Values">' +
                                '<input type="hidden" id="submitButton" name="submitButton">' +
                            '</form>');
            }

            console.log($(downloadFrame).contents().find('body').html());

            var newForm = $(downloadFrame).contents().find('form');
            newForm.attr('action', form.attr('action'));
            newForm.find('#JournalText').val($('#JournalText').val());
            newForm.find('#url').val(form.find('#url').val());
            newForm.find('#Values').val($('#Values').val());
            newForm.find('#submitButton').val(btn.val());

            newForm.submit();

This code works fine in Chrome, but when testing it in IE (all versions) the console log returns 'undefined' but in Chrome it returns the form that I have appended.

Any ideas why IE would have issues with this code?