如何使用javascript制作html和css组件？

我想总结一下我的HTML代码，并用Javascript制作一个组件。我的Html代码包含一个图片列表，我将它们放在标签中。每幅图片都有一个特殊的链接，并将一个数字放入一个

标记中。如何创建一个通过javascript生成它们的模式

另外，我想按照从高到低的数字对这些图片进行排序，我不知道怎么做。总之，用这种方式总结HTML代码是真的吗

<ul class="product-list">
  <li class="product-item">
    <a id="producItem1" href="page2.htm">
      <img class="clothes" src="dress1.jpg">
    </a>
    <div class="price-holder">
      <p id="price1">250,000</p>
    </div>
  </li>
  <li class="product-item">
    <a id="producItem2">
      <img class="clothes" src="coat1.jpg">
    </a>
    <div class="price-holder">
      <p id="price2">350,000</p>
    </div>
  </li>
  <li class="product-item">
    <a id="producItem3">
      <img class="clothes" src="shirt1.jpg">
    </a>
    <div class="price-holder">
      <p id="price3">150,000</p>
    </div>
  </li>
  <li class="product-item">
    <a id="producItem4">
      <img class="clothes" src="skirt1.jpg">
    </a>
    <div class="price-holder">
      <p id="price4">200,000</p>
    </div>
  </li>
</ul>

250000


350000



150000


200000

如果您想从javascript数据创建列表，可以使用对象，但我使用了数组，因为您说不涉及服务器，所以您将手动生成图像名称和价格的数据

$（文档）.ready（函数（）{
imgz=['dress1.jpg'、'coat1.jpg'、'shirt1.jpg'、'skirt1.jpg'、'dress2.jpg']；
价格=[100000、200000、150000、250000、300000]；
linkz=['page1.htm'、'page2.htm'、'page3.htm'、'page4.htm'、'page5.htm']；
//linkz=[]；imgz.forEach（（v，i）=>{linkz[i]='page'+（i+1）+'.htm'；}）；
map（（z，i）=>$（'body'）.append(`

${prices[i]}
`）；
});

为了提供帮助，我们需要更好地了解您的数据集，它是否来自服务器？你会使用ajax吗？是否有任何服务器端渲染可以执行此操作？没有任何服务器可渲染。我没有使用ajax。