js调整div顺序

• js调整div顺序并保留div原有事件等

 <div class="my_tabs">
    <div class="el-tabs__nav-scroll">
      <div class="el-tabs__nav">
        <div class="el-tabs__item is-active">AAAA</div>
        <div class="el-tabs__item">DDDD</div>
        <div class="el-tabs__item">CCCC</div>
        <div class="el-tabs__item">BBBB</div>
      </div>
    </div>
  </div>
  <br>

  <input onclick='btnSort()' type="button" value="按钮"></input>
  <script>
    let tabClass = 'div.my_tabs .el-tabs__nav';
    for (let index = 0; index < 4; index++) {
      document.querySelectorAll(tabClass + " div")[index].addEventListener('click', function () {
        alert(event.srcElement.innerHTML)
      });
    }

    function btnSort() {
      let sortTab = [
        'AAAA',
        'BBBB',
        'CCCC',
        'DDDD',
      ]
      let tabArr = document.querySelectorAll(tabClass + " div");
      let tArr = [];
      for (let i = 0; i < sortTab.length; i++) {
        for (let index = 0; index < tabArr.length; index++) {
          const element = tabArr[index];
          let txt = element.innerHTML;
          let key = sortTab[i];
          if (key == txt) {
            tArr.push(element);
          }
        }
      }
      var parent = document.querySelector(tabClass);
      while (parent.children.length > 0) {
        var child = parent.children[0];
        parent.removeChild(child);
      }
      for (let index = 0; index < tArr.length; index++) {
        const element = tArr[index];
        let txt = element.innerHTML;
        txt = txt.includes('.') ? txt.split('.')[1] : txt;
        element.innerText = (index + 1) + '.' + txt;
        parent.appendChild(element)
      }
    }
  </script>