我想使用 JavaScript 数组打开一个动态页面

问：

我正在使用 JavaScript 使用数组在 html 中创建一个动态页面。现在我想添加一个功能，一旦我单击博客文章，它就会将我带到一个新的动态页面，该页面应包含该特定数组的子项。可能吗？

如何创建动态页面，以及它将如何显示我想在页面上显示的确切目标数组项，以及它将如何使用该数组进行迭代。我脑子里有很多问题。此外，它是否使渲染速度更快或有助于提高网站速度？

以下是供您参考的代码。任何帮助都将不胜感激，因为我已经浏览了各种文档、视频等，但没有相关的东西。

这是一个博客文章网站，我们可以在其中动态创建和显示博客。

<section class="mainsection darkbg">
  <h1 class="somewhatlargefont width100 margintop20 accentfont mainfont">Our Blog</h1>
  <div class="blogrow margintop20" id="servicelist">
  </div>
</section>

这是我正在使用的数组：

let dataarr = [
  {
    id: 1,
    img: "images/analysis.jpg",
    date: "16/10/2023",
    createdby: "Atin pal",
    blogname: "How IT is changing the world",
    blogdetails:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam neque, eum rem saepe, suscipit natus nisi optio voluptates beatae necessitatibus excepturi incidunt delectus dolores. Id neque in ex blanditiis, inventore fugit modi voluptatum ipsam error ut iste adipisci maiores soluta qui repudiandae excepturi mollitia officiis reiciendis incidunt nam distinctio fuga.",
  },
  {
    id: 2,
    img: "images/analysis.jpg",
    date: "16/10/2023",
    createdby: "Atin pal",
    blogname: "How IT is changing the world",
    blogdetails:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam neque, eum rem saepe, suscipit natus nisi optio voluptates beatae necessitatibus excepturi incidunt delectus dolores. Id neque in ex blanditiis, inventore fugit modi voluptatum ipsam error ut iste adipisci maiores soluta qui repudiandae excepturi mollitia officiis reiciendis incidunt nam distinctio fuga.",
  },
  {
    id: 3,
    img: "images/analysis.jpg",
    date: "16/10/2023",
    createdby: "Atin pal",
    blogname: "How IT is changing the world",
    blogdetails:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam neque, eum rem saepe, suscipit natus nisi optio voluptates beatae necessitatibus excepturi incidunt delectus dolores. Id neque in ex blanditiis, inventore fugit modi voluptatum ipsam error ut iste adipisci maiores soluta qui repudiandae excepturi mollitia officiis reiciendis incidunt nam distinctio fuga.",
  },
  {
    id: 4,
    img: "images/analysis.jpg",
    date: "16/10/2023",
    createdby: "Atin pal",
    blogname: "How IT is changing the world",
    blogdetails:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam neque, eum rem saepe, suscipit natus nisi optio voluptates beatae necessitatibus excepturi incidunt delectus dolores. Id neque in ex blanditiis, inventore fugit modi voluptatum ipsam error ut iste adipisci maiores soluta qui repudiandae excepturi mollitia officiis reiciendis incidunt nam distinctio fuga.",
  },
];

下面是 JavaScript 代码：

let services = document.getElementById("servicelist");

dataarr.forEach((list) => {
  const maindiv = document.createElement("div");
  const blogimg = document.createElement("img");
  const secondarydiv = document.createElement("div");
  const serviceTitle = document.createElement("h1");
  const serviceDet = document.createElement("p");
  const readmorecont = document.createElement("div");
  const readmoretxt = document.createElement("p");

  services.append(maindiv);
  maindiv.append(secondarydiv);
  secondarydiv.append(serviceTitle);
  secondarydiv.append(serviceDet);
  maindiv.append(readmorecont);
  readmorecont.append(readmoretxt);
  serviceTitle.innerHTML = list.blogname;
  serviceDet.innerHTML = list.blogdetails;
  readmoretxt.innerHTML = "Read More";
  maindiv.setAttribute("class", "servicecard shadowed");
  blogimg.setAttribute("class", "blogimg");
  serviceDet.setAttribute("class", "centertext, iconlight");
  readmorecont.setAttribute("class", "buttonmain width100");
  secondarydiv.setAttribute("class", "blogsecondarydiv");
  serviceDet.setAttribute("class", "margintop20");
});