<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <ul id="myList">
    <li id="item1">项目 1</li>
    <li id="item3">项目 3</li>
    <li id="item2">项目 2</li>
    <li id="item4">项目 4</li>
  </ul>
  <script>
    function sortAndReturnTextContent() {
      const items = document.getElementById('myList').children;//获取所有子节点为一个数组
      console.log(items)//打印测试获取到的数组
      let arr = []//设置一个空数组
      for(let i = 0;i<items.length;i++)
      {
        //console.log(items[i].id.charAt(items[0].id.length-1));
        arr[i] = Number(items[i].id.charAt(items[i].id.length-1))
      }//将所有id的最后一个数字拿出来变成一个新数组
      console.log(arr);//打印测试结果为1324
      console.log(arr.sort());//运用sort方法来从小到大排序
      console.log(arr);//打印测试新数组变成了1234
      let newArr = arr.map(function(num){
        return "item" + num
      })//运用map方法处理数组中的每一个数字变成'item+数字'的形式
      console.log(newArr);//打印测试新数组变成了['item1','item2','item3','item4']
      newArr.forEach(item => {
        const li = document.createElement('li')
        li.id = item
        li.innerText = '项目' + ' ' + (newArr.indexOf(item) + 1)
        document.getElementById('myList').appendChild(li)
      })
      //循环数组newArr，每次创建一个新的li,
      //li的id为每一个元素,li的innerText为'项目+空格+数字(当前元素的index+1)'
      //然后将每一个li插入到ul中
    }
    sortAndReturnTextContent()
  </script>
</body>
</html>