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