appendChildが上書きされてしまう

こんにちは。javascript初心者です。

今下記のようなコードを書いているのですが、
appdndChildがうまくいきません。
for文の中に入れることで5枚の画像がずらっとリスト化する
予定だったのですが、
どうやらappendChildが上書きされてしまうようで
一枚しか画像がでてきません。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ADOBEヘルプ</title>
    <style>
      .explain{background-color: #000}
      li{
        list-style: none;
      }
      #aplication li img{
        width: 20%;
        height:20%;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="mark">
        <h1>ADOBEヘルプ</h1>
        <ul id="aplication">

        </ul>
      </div>
      <div class="explain">
        <ul class="tab">
          <li></li>
        </ul>
      </div>
    </main>
    <script>
    (function () {
      var apli = [
        "images/ps_cc_app_RGB.svg",
        "images/ai_cc_app_RGB.svg",
        "images/Lr_cc_app_noshadow_RGB.svg",
        "images/st_app_RGB.svg",
        "images/id_cc_app_RGB.svg"];
        var li = document.createElement("li");
      var img = document.createElement("img");
      var aplication = document.getElementById('aplication');
      for (var i = 0; i < apli.length; i++) {
        var imagebox = aplication.appendChild(li).appendChild(img);
        imagebox.src = apli[i];
      }

    })();

    </script>
  </body>
</html>