HTML data in Vanilla Javascript with Ajax

[mathieupreaud]

I have an Ajax function written in Javascript to load the items while scrolling with Colcade.

The issue is that I can't find the way to convert this jQuery line of code to Javascript. I would like to wrap the Ajax data into an objet and use it to parse the HTML.

const posts = $(data);

I'm using colc.append(posts) to load the items. However I'm not sure if posts has to be a jQuery object?

The JS:

const grid = document.querySelector(".js-grid");

    if (grid) {
        
        // Colcade JS
        var colc = new Colcade(grid, {
            columns: '.js-grid-col',
            items: '.js-grid-article'
        });
        
        // Ajax
        const current_post_type = grid.dataset.currentPostType;
        const posts_myajax = grid.dataset.postsMyajax;
        let current_page_myajax = grid.dataset.currentPageMyajax;
        const max_page_myajax = grid.dataset.maxPageMyajax;
        const ajax_url = grid.dataset.ajaxUrl;
        const current_action = grid.dataset.action;
    
        var throttleTimer;
        const throttle = (callback, time) => {
            if (throttleTimer) return;
    
            throttleTimer = true;
    
            setTimeout(() => {
                callback();
                throttleTimer = false;
            }, time);
        };
    
        const handleInfiniteScroll = () => {
            throttle(() => {
                const endOfPage = window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
            
                if (endOfPage) {
                
                    const data = new FormData();
    
                    data.append( 'action', current_action );
                    data.append( 'archive_post_type', current_post_type );
                    data.append( 'query', posts_myajax );
                    data.append( 'page', current_page_myajax );
    
                    fetch(ajax_url, {
                    method: "POST",
                    body: data
                    })
                    .then((response) => response.text())
                    .then((data) => {
                        if (data) {

                            const posts = $(data);
                            colc.append(posts);

                            current_page_myajax++;
                        }
                    });
    
                }
            
                if (current_page_myajax == max_page_myajax) {
                    removeInfiniteScroll();
                }
    
            }, 1000);
        };
    
        const removeInfiniteScroll = () => {
            window.removeEventListener("scroll", handleInfiniteScroll);
        };
    
        window.addEventListener("scroll", handleInfiniteScroll);
    
    }

Thank you.

EDIT

Following to a discussion on a forum, the equivalent in Vanilla javascript would be using DOMParser() to parse the HTML:

const parser = new DOMParser();
const posts = parser.parseFromString(data, "text/html");
colc.append(posts);

However this produces the following error in the console:

Unhandled Promise Rejection: HierarchyRequestError: The operation would yield an incorrect node tree

The error points the Colcade JS file fragment.appendChild( elem );

proto.getQueryItems = function( elems ) {
  elems = makeArray( elems );
  var fragment = document.createDocumentFragment();
  elems.forEach( function( elem ) {
    fragment.appendChild( elem );
  });
  return querySelect( this.options.items, fragment );
};