Adding a getElementById to an jquery .get function-CodePudding

I need to get from 'page' i a container div with id = 'posts1', but I'm struggling to add a .getElementById or similar to this function:

$.get('page-' i, function(data){
    content = data;
    $('#posts').append(content);
});

I've tried adding it on content, data and putting 'page' i in brackets and then adding .getElementById but nothing works, i'm always getting that what i'm doing isn't a function or error 500 (Internal Server Error).

Edit: This is the full function:

function showMore() {
        if (i<=196) {
            $.get('page-' i ' #posts' , function(data){
                content = data;
                $('#posts').append(content);
            });
            i  ;
        }

This is activated on a click of a button. I need to append, after the existing articles in #posts, more articles that are for ex in page-2 in the div with id 'posts1'.

CodePudding user response：

I've found where was my issue:

function showMore() {
        if (i<=196) {
            $.get('page-' i , function(data){
                var content = $(data).find('#posts1');;
                $('#posts').append(content);
            });
            i  ;
        }
    }

I've added .find to my data and it's working perfectly.

CodePudding user response：

You can use template literals and .load

If i is 1, then this will read a page with filename page-1 and insert the element from that page with id="post1" into the element with id="posts" on current page

$('#posts').load(`page-${i} #post1`)

Added to a simpler version of your function

function showMore() {
  if (i>196) return;  
  $('#posts').load(`page-${i} #posts`);
  i  ;
}