タグ内の要素を逆転するjsを作りたいです。

<ul>
  <li class="test">
     <i></i><span></span>
 </li>
  <li class="test">
    <i></i><span></span>
  </li>
</ul>

上記のようなソースがあった時に、
testというクラス名を持つ<li>の中だけ<i></i>と<span></span>の位置を変えて下記になるようにしたいのですが、

  <li class="test">
   <span></span><i></i>
  </li>

色々と調べたのですが、見つけられませんでした。
上記はjavascriptで対応可能でしょうか？

行動規範の内容に同意します

回答1件

こんな感じでどうでしょうか？☺️

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <script>
9        window.addEventListener('DOMContentLoaded', () => {
10
11            const testElements = document.querySelectorAll('.test');
12            testElements.forEach((item)=>{
13                const arr = Array.from(item.childNodes);
14                arr.reverse();
15                item.append(...arr);
16            })
17
18        });
19    </script>
20</head>
21<body>
22    <ul>
23        <li class="test">
24           <i></i><span></span>
25       </li>
26        <li class="test">
27           <i></i><span></span>
28       </li>
29      </ul>
30</body>
31</html>