html,head and body tags are being deleted after processing Javascript. So how to avoid such deletion? [on hold]

With the help of the following code, I can add number of colspan according to number of td available within a table.The problem with is that, it is adding properly colgroup, but after processing, it is deleting some tags within that same page(html,head,body tags).

How can I avoid such deletion?

$(document).ready(function() {

    $('#btnApply').on('click', function() {

        var input = '<div>' + $('#input').text() + '</div>';
        var html = $('<div/>').html(input).contents();
        console.log(html.find('table'));
        var output = '';
        html.find('table').each(function() {

            var colCount = 0;
            $(this).find('tr:nth-child(1) td').each(function() { // Get the count of table columns

                if ($(this).attr('colspan')) { // if there is a <td colspan>
                    colCount += +$(this).attr('colspan');
                } else {
                    colCount++;
                }
                console.log($(this));
            });


            var colgroupList = '';
            for (i = 0; i < colCount; i++) { // Add a <colgroup></colgroup> for each <td>
                colgroupList += '<col width="50%"></col>';
                console.log(colgroupList);
            }
            console.log('<colgroup>' + colgroupList + '</colgroup>');

            $(this).find("tbody").prepend('<colgroup>' + colgroupList + '</colgroup>');

            output += '<table>' + $(this).html() + '</table>';

        });

        $('#output').html(output);
        $('#outputHTML').text(output);
        $('#outputArea').fadeIn(1000);

    });

});

So can anyone help me. You can view my fiddle.

via Chebli Mohamed