我正在为现有的应用程序构建一个模板，并希望包含一个按钮来更改网页上显示的元素的排序顺序。页面使用Bootstrap 5.3进行样式化，所以我已经有了jQuery和Bootstrap的其他功能。
我只是想要一个按钮，反转允许切换排序顺序数组的顺序，并反映在页面上，而无需重新加载它。
以下是一些条目的HTML：

<button type="button" onClick="reverseEntries();">Reverse order of entries</button>
<div id="entries">
  <div class="card">
    <h2>Entry 0</h2>
  </div>
  <div class="card">
    <h2>Entry 1</h2>
  </div>
  <div class="card">
    <h2>Entry 2</h2>
  </div>
</div>

我想要排序的元素可以从名为entries的JavaScript对象获得，该对象在页面加载时已经填充。为了简单起见，你可以把它当作一个数组：

entries = [
   'Entry 0',
   'Entry 1',
   'Entry 2'
]

模板引擎是dot.js，它遍历数组并写入每个div客户端-即每个数组成员值被写入H2标签之间。
这是一个模板，它构建了html片段。

<div id="entries">
  {{~ entries:entry:index}} <!-- iterates through the entries array -->
  <div class="card">
    <h2>{{=entry}}</h2>
  </div>
  {{~}} <!-- end of iteration block -->
</div>

我可以使用entries.reverse()来反转数组的顺序，但我不确定如何在反转数组后重做页面。
以下是到目前为止的函数：

function reverseEntries(){
  entries = entries.reverse(); // this successfully reverses the array
  // how can I update the page so the entries appear in the new order of the array.
}

我可以通过使用不同的查询重新加载页面来实现相同的输出，但由于所有数据都已经在JavaScript中，我更喜欢在客户端完成。