Не работает .appendChild() в место .innerHTML

Дамы и Господа, есть такой ajax код:

    function ajax(url, callback, data, request) {
    try {
        request = new(this.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');
        request.open(data ? 'POST' : 'GET', url, 1);
        request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        request.setRequestHeader('Content-type', 'application/json');
        request.onreadystatechange = function () {
            request.readyState > 3 && callback && callback(request.responseText, request);
        };
        request.send(data)
    } catch (e) {
        window.console && console.log(e);
    }
};

в отдельной папке.

И в отдельной папке такой JS файл main.js:

   document.addEventListener("DOMContentLoaded", function() {
    const iDroot = document.getElementById('root');
        ajax('../pages/index.html', function(res) {
            iDroot.appendChild(res);
        })
    const wrapper = document.getElementById('wrapper');
    console.log('wrapper');   
});

Если в место строчки iDroot.appendChild(res); написать iDroot.innerHTML = 'res';, то все работает.

Объясните, почему в данном случае .innerHTML работает, а .appendChild() нет?

Больше всего смущает, что в консоли wrapper видит. В консоли показывает: