Javascript для создания нового элемента и добавления к нему изображения

Я пытаюсь изменить некоторый код JavaScript getUserMedia из Анант Нараянан, чтобы иметь возможность создавать новый div с новым изображением снимка внутри него каждый раз, когда щелкается поток (в отличие от текущего метода, который просто заменяет новое изображение снова и снова в том же разделе). Мне удалось создать новый класс с именем «aClassName» каждый раз, когда щелкают поток, но изображения не добавляются к этим классам...

        function takeSnapshot() {
          var img = document.querySelector('img') || document.createElement('img');
          var context;
          var width = video.offsetWidth
            , height = video.offsetHeight;

          canvas = canvas || document.createElement('canvas');
          canvas.width = width;
          canvas.height = height;

          context = canvas.getContext('2d');
          context.drawImage(video, 0, 0, width, height);

          img.src = canvas.toDataURL('image/png');

          // My Modified Code //

          var new_row = document.createElement('div');
          new_row.className = "aClassName";
          document.body.appendChild(new_row);
          document.getElementsByName("aClassName").appendChild(img);
        }

Я также попытался создать счетчик с длиной существующего div "aClassName" и использовать getElementsByClassName, но это поместило изображение только в первый div "aClassName", а не остальные...

        var new_row = document.createElement('div');
        new_row.className = "aClassName";
        document.body.appendChild(new_row);
        var c = document.getElementsByClassName("aClassName").length;
        var counter = parseInt(c)
        document.getElementsByClassName("aClassName")[counter - 1].appendChild(img);

Это то, что происходит в настоящее время... Генерируются div aClassName и создается новое изображение, но новое изображение не генерируется внутри div aClassName...