【Java script問題集】1-12 「1-11.」で取得したli要素の値を逆順でhtml表示してみよう

1-12.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>1-12</title>
<script src="1-12.js" language="javascript" type="text/javascript"></script>
<body>
   <div id="shiritori">
       <li>りんご</li>
       <li>ごりら</li>
       <li>らっぱ</li>
       <li>ぱいぷ</li>
       <li>ぷりん</li>
    </div>
    <button id="btn">切り替え</button>
</body>
</html>

 1-12.js

$(function(){
    $("#btn").click(function(){
        $("#shiritori").html($("#shiritori li").get().reverse());
    });
});

 実行結果(ボタン押下前)

f:id:mkyosuke:20200629114655p:plain

実行結果(ボタン押下後)

f:id:mkyosuke:20200629114725p:plain