Javascript to Create a New element and Append an image to It

Question

I'm trying to modify some getUserMedia JavaScript code from Anant Narayanan to be able to create a new div with a new snapshot image inside of it each time the stream is clicked (as opposed to the current method that just replaces the new image over and over in the same div). I was able to generate a new class called "aClassName" each time the stream is clicked, but the images do not append to these classes...

        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);
        }

I also tried to create a counter with the length of how many "aClassName" divs exist and use getElementsByClassName, but this only placed the image in the first "aClassName" div and not the rest...

        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);

This is what is currently happening ... The aClassName divs are generating and a new image generates, but the new image does not generate inside of the aClassName div...

Answer 1

A getElementByTagName is used to get the count of divs instead of get"ElementsByClassName .

Also the reference of the last element should be counter -1 .

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)
console.log(counter)
document.getElementsByClassName("aClassName")[counter - 1].appendChild(img);

Edits after the modification:

Have a look at the line below:

var img = document.querySelector('img') || document.createElement('img');

After the first iteration the element img is available and will not be created a new one for. So, the child element you are appending to the parent is the same element. That is the reason you see it moving from parent to parent.