如何从动态加载的 html 动态加载新页面？

如何解决如何从动态加载的 html 动态加载新页面？

我目前有一个问题，我的网页有一个图片页面，可以动态上传用户可以上传的图片。每张图片卡都有一个按钮，单击该按钮可显示包含有关该特定图片的评论的新页面。评论和图片信息都以数组的形式存储在服务器上。我不确定如何让每张图片卡上的按钮生成一个新页面，而无需将新 HTML 页面编码为单页应用程序。另外，我将如何将图片标题的值传递到新页面，以便我可以过滤评论以仅包含有关特定图片的评论？我已经有了返回所有图片和评论的获取和发布请求从服务器。 server.js

function loadpics() {
    document.getElementById('insertpics').innerHTML='' 
    fetch ('http://127.0.0.1:8090/pics',{
        method: 'GET',headers: {
            "Content-Type":"application/json"
        }
     })
    .then((res) => { return res.json(); })
    .then(pics => {
        for (let pic of pics){
            const y= `
            <div class="card" style="width: 18rem;">
            <img class="card-img-top" src=${pic.picurl} alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">${pic.username}</h5>
              <p class="card-text">${pic.nameofpic}</p>
            <a  class="btn btn-info" href="#" >View Comments on this picture</a>
            </div>
          </div>
            `;

            document.getElementById('insertpics').innerHTML+=y;
        }
    })
};
loadpics();

正如你所看到的，我在卡片的末尾有一个按钮，但不知道如何让它生成一个空白页面，上面只有链接到那张照片的评论。图片数组有这个结构 [{"username":"username","picname":"nameofpic","pic":"pic.png"}] 评论数组有这个结构 [{"username":"username ","comment":"comment"}]。任何帮助将不胜感激 ！编辑：有人请帮忙。

解决方法

创建一个仅包含单个图片和评论的新页面。 在“a”标签中添加网址。例如http://127.0.0.1:8090/viewPic/{id}