Question

I want to have the jQuery AJAX load to insert before the navigation as-is instead of replacing the contents of an element.

I’m trying to accomplish this by loading it in a new div before the navigation, but I’m having trouble unwrapping it as .unwrap() unwraps the parent and not the current div. Trying to unwrap the divs .children() breaks my AJAX load.

navigation.before(
    $('<div />')
        .load(nextLink + ' .post', function() {
            pageNum++;
            nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

            if(pageNum <= max) {
                navigation.children('a').text('Load More');
            }
            else {
                navigation.children('a').text('Nothing else to load.');
            }
        })
);

If you’re wondering where this came from, it’s a modified version of Load Next WordPress Posts With AJAX

Answer 1

Try this

$('<div />')
    .load(nextLink + ' .post', function() {
        pageNum++;
        nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

        if(pageNum <= max) {
            navigation.children('a').text('Load More');
        }
        else {
            navigation.children('a').text('Nothing else to load.');
        }

        navigation.before($(this).html());
    });