How to insert contents from AJAX result into an element without removing its existing contents?

I’d like to first point out that english is not my first language and im a newbie tryna learn news things so i apologize if i might sound confusing.

So here it goes, im trying to make an image viewer for my local image files and i decided to try and make a “load more” button using jquery/ajax & php so it doesn’t show all the files on the selected directory.

Here’s my process.php:

function response($status,$imgs,$count,$last) {
    $status = array(
        'status'    => $status,
        'imgs'      => $imgs,
        'count' => $count,
        'last' => $last
    );
    return json_encode($status);
}  


$files = glob("assets/images/shop/*.*");
$total_records = count($files);

$viewmore = (int)$_POST['viewmore'];

$per_page = 10;

$perpage = array_slice($files, $viewmore, $per_page, true);


$i = 0;
$thumbs = array();
foreach ($perpage as $key => $value) {

    
   $image = $perpage[$key];
    $supported_file = array(
            'gif',
            'jpg',
            'png'
     );

    $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));    
    
    if($ext == 'gif'){
        $fext = 2;
    }elseif($ext == 'png'){
        $fext = 1;
    }elseif($ext == 'jpg'){
        $fext = 0;
    } 
    
    $imgfilename = pathinfo($image, PATHINFO_FILENAME);
    
    if (in_array($ext, $supported_file)) {
        $id = ($i+1);
        $thumbs[] = '<img src="'.$image .'" data-name="'.$imgfilename.'" data-ext="'.$fext.'" style="width:50px;margin:5px" />';
    } else {
        continue;
    }   
$i++;

}

$num = $viewmore + $per_page;
$last = $key + 1;

echo response(0,$thumbs,$num,$last);

My jQuery/Ajax:

    $(document).on("submit",".imgViewMore",function(e){
    e.preventDefault();
    $(".imgViewMore").attr("disabled", true);
    $(".imgViewMore").val("Loading..");
    
    var data = $(".imgViewMore").serialize();
    var process = 0;
    if (process == 0){
        $.ajax({
            type: "POST",
            url: "/process.php",
            data: data,     
            dataType: "json",
            success: function(data){
                if(data.last >= <?php echo $total_records;?>){
                    $(".imgViewMore").hide();
                }else{
                    $("#imgViewerContainer").append(data.imgs); // NEED HELP HERE
                    $("#viewmore").val(data.count);
                    $(".imgViewMore").attr("disabled", false);
                }
                $(".imgViewMore").val("Load More");
            },
            error: function(){
                //alert('Oops! There seem to be an issue..');
            },
        });
    }
});

I manage to get the data i needed for each ajax load/loop using those codes however, i really can’t figure out how to ouput all those formatted data/images on the array that was created from process.php into the #imgViewerContainer element.

The ajax load/result looks like this:

<img src="filename.extension">
<img src="filename.extension">
<img src="filename.extension">
<img src="filename.extension">
<img src="filename.extension">

Basically, on page load the target element have contents and looks like this:

<div id="imgViewerContainer">
   <img src="filename.extension">
   <img src="filename.extension">
   <img src="filename.extension">
   <img src="filename.extension">
   <img src="filename.extension">
   <form method="post" class="imgViewMore"><input type="hidden" ><input type="submit" class="imgViewMore"></form>
<!--NEED TO INSERT data.imgs HERE FROM THE AJAX RESULT  -->
</div>

So i need to insert each ajax results inside & at the bottom of #imgViewerContainer element. I decided to try and use append() & html() and got this error:

Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.

Any help, guide or explantion is greatly appreciated. Thank you!

Answer

you get error in append because the data.imgs is array

in process.php change this:

$thumbs = array();
$thumbs[] =

to this:

$thumbs = '';
$thumbs .=