2

Дамы и Господа, есть такой 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 видит. В консоли показывает:

введите сюда описание изображения

2
  • 1
    appendChild ожидает Node, ты пытаешься туда вставить String... вроде ошибка же красноречиво намекает. 3 фев 2018 в 8:10
  • Если бы я столько понимал.... Слушай, а будь другом, объясни, в данном примере, что грамотней использовать или правильней или нет особого значения...? Хотя значение есть, вдруг если мне придется вставить какой нибудь кусок туда куда надо, а без ` .appendChild() ` этого не сделаешь...
    – Air
    3 фев 2018 в 8:19

1 ответ 1

3

В вашем коде, тут: ajax('../pages/index.html', function(res) {

В аргумент callback функции res будет передана строка (браузер посылает http get запрос, получает ответ. Тело ответа - это всегда просто String).

После чего, при вызове .appendChild(res) браузер пытается добавить содержимое переменной res, предполагая что это экземпляр Node в конец списка дочерних элементов родителя. Но оказывается, что это строка, поэтому выбрасывается соответствующая ошибка parameter 1 is not of type 'Node'.

В случае использования element.innerHTML = '...' - браузер распарсит переданную строку, попытается на ее основе создать новые узлы Dom, и вставит их внутрь элемента.

Про appendChild: https://developer.mozilla.org/ru/docs/Web/API/Node/appendChild

Про innerHTML: https://developer.mozilla.org/ru/docs/Web/API/Element/innerHTML

4
  • kaluginserg, привет, а как мне тогда выйти из ситуации, если мне надо ajax-ом вставить элемент в определенное место... innerHTML тут не помощник
    – Air
    7 фев 2018 в 9:59
  • Попробуй например через createElement: let newElem = document.createElement(); newElem.innerHTML = ajaxStringHtml; targetElem.appendChild(newElem); 7 фев 2018 в 13:22
  • Вопрос такой... Получается, что ajax-ом я могу что-то куда-то засунуть только методом innerHTML?
    – Air
    7 фев 2018 в 13:24
  • Собственно чем именно не подходит innerHTML?? В этой ветке есть разные варианты создания элемента из строки: https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro 7 фев 2018 в 15:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.