javascript - 如何按顺序显示div中的段落和图像？

Question

我正在构建一个小型网络工具，编辑者可以通过使用按钮添加段落和图像来编写内容。我使用 id 存储元素((元素数量)从 0 开始，并为每个新元素递增)并使用按钮加载，以便将内容显示为 div“预览”，稍后在网页中显示内容上。

我的问题是，由于我不明白的原因，图像始终显示在所有段落下方，而不是按顺序显示。大概有一个简单的修复方法，但我对 HTML、CSS 和 JS 很陌生，无法在网上找到解决方案。 抱歉，如果这是一个愚蠢的错误或者解决方案已经发布在某处。

Javascript 处理预览渲染:

// Preview current document status
document.getElementById("previewButton").addEventListener("click", function() {
   // Clear
   document.getElementById("preview").innerHTML = "";

   // Add all elements properly
   var section = document.getElementById("preview");
   var id = "preview";

   for (var counter = 0; counter < element_counter; counter++) {
      var type = document.getElementById(counter).nodeName;

      // If text element
      if (type === "TEXTAREA") {
         var paragraph = document.createElement("p");
         var text = document.getElementById(counter).value;
         paragraph.setAttribute("id", id + counter);
         paragraph.setAttribute("class", "flow-text");
         paragraph.append(text);
         section.appendChild(paragraph);
      }

      // If image element
      if (type === "INPUT") {
         var file = document.getElementById(counter).files[0];
         var reader = new FileReader();
         reader.onload = function(e) {
            var image = document.createElement("img");
            image.setAttribute("id", id + counter);
            image.setAttribute("src", e.target.result);
            image.setAttribute("class", "materialboxed responsive-img");
            section.appendChild(image);
         }
         reader.readAsDataURL(file);
      }
   }
});

Answer 1

这可能有用。没有你的代码我无法测试。然而，基本上，工作原理是隔离一些变量，以便它们代表不同的实例化。然后立即将图像元素添加到 DOM 中。 reader.onload 预计仍会异步运行。

enter code here if (type === "INPUT") {

    (function() {
        var file = document.getElementById(counter).files[0];
        var reader = new FileReader();
        var image = document.createElement("img");
        image.setAttribute("id", id + counter);
        image.setAttribute("class", "materialboxed responsive-img");
        section.appendChild(image);

        reader.onload = function(e) {
            image.setAttribute("src", e.target.result);
        }

        reader.readAsDataURL(file);
    }());
}