创建新元素并为其添加图像的JavaScript

Question

我正在尝试从Anant Narayanan修改一些getUserMedia JavaScript代码，以便每次单击流时都可以在其中创建一个带有新快照图像的新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);
        }

我还尝试创建一个计数器，该计数器的长度为存在“ aClassName” div的长度并使用getElementsByClassName，但这仅将图像放置在第一个“ aClassName” div中，而不是其余部分...

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

这是当前正在发生的事情...正在生成aClassName div并生成一个新图像，但是新图像不会在aClassName div内生成...

Answer 1

使用getElementByTagName而不是get"ElementsByClassName来获取div的数量。

最后一个元素的引用也应为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);

修改后进行编辑：

看看下面的行：

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

第一次迭代后，元素img可用，并且不会为其创建新的元素。因此，您要追加到父项的子元素是相同的元素。这就是您看到它从父级移到父级的原因。