遇到问题，请求各位帮助

img


大佬们知道思路 可是不懂具体该怎么办


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="content"></div>
  <button onclick="handleClick()">逆序排列</button>
  <script>
    let data = ['音乐', '阅读', '健身', '打球']
    
    getHtml()
    function getHtml() {
      let str = '<ol>';
      data.map((item) => {
        str += `<li>${item}</li>`
      })
      str += '</ol>'
      document.getElementById('content').innerHTML = str
    }
    
    function handleClick() {
     data.reverse()
     getHtml()
    }
  </script>
</body>
</html>

1、就是排序；
2、排序的时候，只是排序数据，数据变了，再更新节点即可；
3、有疑问来交流