Javascript 绘制到一个画布将清除其他画布元素

我正在构建一个照片上传工具，添加一张照片会生成一个新的预览div，其中有一个输入字段来命名你的照片，还有一个

canvas

元素，我将他们的照片绘制到该元素，以便他们可以预览它。这样做的目的是让他们可以选择多张照片，并在一次上传所有照片之前进行预览。我的问题是，当您添加第二张照片时，当它将图像绘制到新生成的画布时，它会清除所有其他画布元素的内容。这是我的密码

   function createPhotoPreviewDiv(img){
      var canvas_id = "previewCanvas" + $('.previewDivCanvas').length;
      var preview = "<div class='previewDiv'><span>Photo 1</span>" +
                    "<input type='text' placeholder='photo1' class='previewPhotoName'>" +
                    "<canvas class='previewDivCanvas' id='" + canvas_id + "'></canvas>" +
                   "</div>";

      document.getElementById('editLocationPreviewContainer').innerHTML+= preview;

      var canvas = document.getElementById(canvas_id);
      canvas.width = 200;
      canvas.height = 100;
      var context = canvas.getContext('2d');
      context.drawImage(img, 0, 0);

   }

函数CreatePhotoPreviewIV（img）{
var canvas_id=“previewCanvas”+$（'.previewDivCanvas'）。长度；
var preview=“照片1”+
"" +
"" +
"";
document.getElementById（'editLocationPreviewContainer'）。innerHTML+=预览；
var canvas=document.getElementById（canvas\u id）；
画布宽度=200；
画布高度=100；
var context=canvas.getContext（'2d'）；
drawImage（img，0,0）；
}

---

它工作正常，只是当它再次运行时（当用户添加第二张照片时），它先前创建的画布将被清除。有人知道我做错了什么，或者这是多个画布元素的预期行为吗

多亏了@darckcrystale的评论，我发现问题是由我用

innerHTML

而不是

.append（）

添加新元素引起的。通过使用

innerHTML

我替换了我以前创建的所有画布元素，这清除了我在其中绘制的图像。

要添加新元素，你应该使用

.append（）

而不是试图连接内部HTML。@darkcrystale谢谢，这实际上修复了它。我不明白到底为什么，据我所知，这两种方法的结果都是一样的，我的印象是这两种方法几乎可以互换？我认为这比

.append（）

更清楚，因为使用

.append（）

您立即看到要向元素添加内容：）另请参见：但我不知道为什么它解决了您的问题。@darkcrystale谢谢您的链接！现在我在考虑这个问题，这对我来说已经很明显了-使用

innerHTML+=

将重新绘制我已经创建的画布，这意味着我将用新的画布替换旧的画布，而这些画布没有被绘制出来。这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论。-嘿@AnuragDaolagajao，这个答案有什么问题吗？这就解决了我的问题。你能告诉我我需要做些什么来改进这一点，使其成为一个可接受的答案吗？