Постраничная навигация Битрикс (через "показать еще"). Как решить ошибку в JS?

Question

[Александр]

Есть статья тут, вроде все просто и понятно.

Есть скрипт

$(document).ready(function(){

    $(document).on('click', '.load_more', function(){

        var targetContainer = $('.news-list'),          //  Контейнер, в котором хранятся элементы
            url =  $('.load_more').attr('data-url');    //  URL, из которого будем брать элементы

        if (url !== undefined) {
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'html',
                success: function(data){

                    //  Удаляем старую навигацию
                    $('.load_more').remove();

                    var elements = $(data).find('.news-item'),  //  Ищем элементы
                        pagination = $(data).find('.load_more');//  Ищем навигацию

                    targetContainer.append(elements);   //  Добавляем посты в конец контейнера
                    targetContainer.append(pagination); //  добавляем навигацию следом

                }
            })
        }

    });

});

я заменил на чистый JS

document.getElementById('load_more').addEventListener('click', function () {

        var targetContainer = document.querySelector('.news-list');
        var url = document.querySelector('.load_more').getAttribute('data-url');    //  URL, из которого будем брать элементы

        if (url !== undefined) {
            BX.ajax({
                type: 'GET',
                url: url,
                dataType: 'html',
                onsuccess: function (data) {

                    //  Удаляем старую навигацию
                    document.querySelector('.load_more').remove();

                    var elements = data.querySelectorAll('.news-item'),
                        pagination = data.querySelectorAll('.load_more');//  Ищем навигацию

                    targetContainer.append(elements);   //  Добавляем посты в конец контейнера
                    targetContainer.append(pagination); //  добавляем навигацию следом

                }
            })
        }
    })

и получаю data.querySelectorAll is not a function.
Не пойму как исправить ошибку. Мы вроде получили данные onsuccess: function (data) успешно и через var elements = data.querySelectorAll('.news-item') или var elements = data.querySelector('.news-item') пробую найти нужное и добавить это на страницу.

Comments

[ProjectSoft]

Вы получаете строку, а не DOM или Node.
Переведите полученную строку в Node и уже потом проводите поиск элементов.
Например, создайте элемент div, вставьте в него с помощью innerHTML полученную data и проведите поиск созданный_div.querySelectorAll('.news-item')

[Александр]

ProjectSoft, почти вышло спасибо,
через querySelector добавляет по элементу, а querySelectorAll дает [object NodeList].

Answer 1

[Вадим]

querySelector* вызывается на DOM элементах. Сервер не может вернуть Вам ссылку на дом элемент.
Что в data? Селектор, судя по всему? тогда

document.querySelector(data).querySelector('.news-item')

, если это сужение поиска необходимо.
---
$(data).find('.news-item') не равно data.querySelectorAll('.news-item'). Вы либо ошиблись, либо не до конца понимаете что такое $(data)

Comments

[Александр]

function (data) это цела следующая страница, в которй нужно найти блок.news-itemи вставить его в контейнер targetContainer

[Вадим]

Александр, Вы не ответили что хранится в data.
хтмл разметка в виде строки?

[Александр]

Вадим, наверно да, строку, когда я ее после

onsuccess: function (data) {

                    const new_el = document.createElement('div');
                    new_el.innerHTML = data;

                    //  Удаляем старую навигацию
                    document.querySelector('.load_more').remove();

                    var elements = new_el.querySelectorAll('.news-item'),
                        pagination = new_el.querySelectorAll('.load_more');//  Ищем навигацию

                    console.log(elements);
                    console.log(pagination);


                        targetContainer.append(elements);   //  Добавляем посты в конец контейнера
                    targetContainer.append(pagination); //  добавляем навигацию следом

                }

почти заработало. если querySelector то работает, добавляет по 1му элементу, а querySelectorAll дает [object NodeList]

[Вадим]

Александр, ну так сделайте console.log(data) и посмотрите что там лежит, или в network посмотрите.
Можно воспользоваться DOMParser если там строка с разметкой.

var parser = new DOMParser()
var dataMarkup = parser.parseFromString(data, 'text/html')

а дальше как у Вас было.

var elements = dataMarkup.querySelectorAll('.nav-items')...