Firebase网络存储仅填充第一张图片

Question

我正在查询数据库中的数据，然后使用innerHTML创建一个div。 div中有两个图像，我想用var数据填充。

它总是填充两个img标记的第一个实例，但不会填充任何其他标记。有人能指出我正确的方向吗？

imgRef.child(PlanUserUID).child("profileP.jpg").getDownloadURL().then(function(url) {
                      var pp = url;
                      document.getElementById('profileP').style.backgroundImage = 'url("' + pp + '")';

                  }).catch(function(error) {

                  });

                  imgRef.child(PlanUserUID).child("Plans").child(PlanUID).child("1.jpg").getDownloadURL().then(function(url) {
                      var test = url;
                      document.getElementById('planImg').style.backgroundImage = 'url("' + test + '")';

                  }).catch(function(error) {

                  });

                  var $result = document.createElement("div");
                  $result.className = ("col-md-4");
                  $result.innerHTML = "<div class='countryResults'><img id='profileP' class='profileP' /><img class='planImg' id='planImg' />";
                  $result.onclick = clicked;

                  document.getElementById("results").appendChild($result);