如何按顺序显示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);
    }());
}