新しいDivsを動的に追加したときにイベントリスナーが削除されます

Question

ユーザーが写真を選択したときにプレーンJavaScriptの親divにdivを追加します。プレビューを開いたり、写真を削除したりするための2つのクリックイベントも追加しています。最初の写真を追加すると、両方のイベントは正常に動作しますが、別の写真を追加すると、最新の写真にクリックイベントが表示されますが、前のdivは表示されません。

どうしてこれが起こっているのですか、もっと重要なのはどうしたらいいですか？

問題のコードは以下のとおりです。

function addImageToView(imageURI){ 
 
       var imageDiv = document.getElementById('imageMaster'); 
 
       imageDiv.innerHTML += '<div style="padding-bottom: 10px;"><div style="float: left;" class="thumbnail" id= img_'+ imageCounter +'><img id= img_'+ imageCounter +' src="' + imageURI + '"></div><div id= img_'+ imageCounter +'_delete>delete</div><div style="width:67%; padding-top: 30px; padding-left: 10px;" class="thumbnail"><label class="item item-input" id="article-input8"><input type="text" placeholder="Photo Caption" ng-model="data.report_title"></label></div></div>'; 
 
       document.getElementById('img_'+ $scope.imageCounter).addEventListener("click", function(){showMe(imageURI)}); 
 
       document.getElementById('img_'+ $scope.imageCounter + '_delete').addEventListener("click", function(){removePhoto(this, imageURI)}); 
 
      }

Answer 1

@Teemuは、上記のコメントで指摘したように、innerHTMLの方法は、完全に要素を置き換え、そして唯一のリスナーが私はその後残りました。 insertAdjacentHTMLメソッドを使用して解決されました。