Inserting external code into div with jquery-CodePudding

I'm attempting to build an image gallery where pressing on the related button will display (and write) into a hidden div. Using jquery, I can get it to show/hide the div, and even load the specified image. But when I try putting everything in an external file (to minimise code duplication), I'm getting nothing.

Primary html file:

    <!DOCTYPE html>
    <html>
    <head>
<link rel="stylesheet" href="css/full.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
    <div id="img-container" style="display: none;">

    </div>


    <button id="view-more">Show</button>
    <script type="text/javascript">
    var imgWrite = $('<img src="img/photos/image0000-0.png" />');

    $("#view-more").click(function(){
            $("#img-container").css('display', 'flex');
             $('#img-container').load("galleries/gallery01.txt"
        
    });
       
    $("#close").click(function(){   
     $("#img-container").css('display', 'none');
    });
    </script>
    </body>
    </html>

Edited post: Loaded from an external text file

<button id="close">Close</button>
<img src="img/photos/image0000-0.png" />
<div id="info">
<h4>Title</h4>
<h5>Artist</h5>
<h5>Medium</h5>
<h6>Notes</h6>
</div>

Edit: I fixed the missing close paren,the button and the background styles loaded, but still no image or headers.

CodePudding user response：

Can you try again with the Ajax method?

$("#view-more").click(function(){
    $("#img-container").css('display', 'flex');
    
    $.ajax({
        url : "galleries/gallery01.txt",
        dataType: "text",
        success : function (data) {
            $('#img-container').html(data);
        }
    }); 
});