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

Question

I am building a small web-tool where editors can write content by using buttons to add paragraphs and images. I store the elements with an id ((number of element) starting at 0 and incremented for every new element) and load with a button in order to a div "preview" where the content is supposed to be displayed as in the web page later on.

My issue is that, for a reason I don't understand, the image is always displayed below all the paragraphs instead of being in order. Presumably there is an easy fix, but I am very new to HTML, CSS and JS and couldn't find the solution online. Sorry if this is a stupid mistake or the solution was already posted somewhere.

Javascript handling the preview rendering:

// 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

This might work. I can't test though without your code. However basically the principle at work is to isolate some of the vars so they represent distinct instantiations. And then immediately add the image element to the DOM. The reader.onload is expected to run asynchronously still.

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);
    }());
}