Javascript 仅在加载DOM元素后将其附加到其他DOM元素

我正在尝试编写代码来执行以下操作：

当用户上载图像时，将这些图像的预览作为画布元素返回。（这由loadImage API负责）

将div元素附加到每个画布旁边

为了按顺序执行上述操作，我需要仅在画布元素完全绘制之后调用document.querySelectorAll方法

这是我写的代码。我试图在这里使用promise，但显然，这个promise是在调用loadImage函数之后解决的，而不是在完全绘制canvas元素之后。当我运行该函数时，预览会作为画布元素填充，但不会附加“photo_order”div元素

function rpu() {
  let promise = new Promise(async function(resolve, reject) {
    let filez = e.target.files;
    let files = Array.from(filez);
    files.forEach(function(file) {
      loadImage(
        file,
        function(img) {
          document.querySelector('#r_im_preview').appendChild(img);
          document.querySelector('#r_im_preview').classList.remove('hide');
        }, {
          maxWidth: 150,
          orientation: true,
          contain: true
        }
      )
    });
    resolve();
  });
  promise.then(function() {
    let k1 = document.querySelectorAll('canvas');
    let k2 = Array.from(k1);
    let k3 = '<div class="photo_order" style="cursor: pointer;"></div>'
    k2.forEach(k => {
      k.insertAdjacentHTML('afterEnd', k3);
    })
  });
}

函数rpu（）{
让承诺=新承诺（异步函数（解析、拒绝）{
让filez=e.target.files；
让files=Array.from（filez）；
forEach（函数（文件）{
加载映像(
文件
功能（img）{
document.querySelector（'r#u im#u preview'）.appendChild（img）；
document.querySelector（'r#u im_preview'）.classList.remove（'hide'）；
}, {
最大宽度：150，
方向:对,，
包含：正确
}
)
});
解决（）；
});
promise.then（函数（）{
设k1=document.querySelectorAll（'canvas'）；
设k2=数组。从（k1）；
设k3=''
k2.forEach（k=>{
k、 插入式相邻TML（“后端”，k3）；
})
});
}

---

如何修复代码以实现我要做的事情？任何建议都非常受欢迎。

我认为您需要重构代码以正确使用承诺。大概是这样的：

const appendPreview=（img）=>{
document.querySelector（“#r#u im#u preview”）.appendChild（img）
document.querySelector（'r#u im_preview'）.classList.remove（'hide'）；
}
const loadImageP=（文件、cb、设置）=>新承诺（（解析、拒绝）=>{
试一试{
常量cbP=（…args）=>（cb（…args），解析）
loadImage（文件、cbP、设置）
}抓住{
拒绝
}
})
常量设置={
最大宽度：150
方向:对,，
包含：正确
}
异步函数rpu（）{
const promises=[…e.target.files].reduce（（acc，file）=>
[…acc，loadImageP（文件，附件预览，设置））]，[]）
等待承诺。所有（承诺）
让canvasNodes=document.querySelectorAll（'canvas'）；
让orderNode=''
[…canvasNodes].forEach（（n）=>{n.insertAdjacentHTML（'afterEnd'，orderNode）；
}

据我所知，主要问题是，Promise将在for循环后立即解决，而不是等待图像加载。试试这个：效果非常好。谢谢，@Chris G！！