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

我正在构建一个小的web工具，编辑可以通过使用按钮添加段落和图像来编写内容。我用一个id（元素数）存储元素（从0开始，每个新元素都递增），并用一个按钮加载，以便在div“preview”中显示内容，稍后在web页面中显示内容

我的问题是，出于我不理解的原因，图像总是显示在所有段落的下方，而不是按顺序显示。可能有一个简单的解决方案，但我对HTML、CSS和JS非常陌生，无法在网上找到解决方案。 抱歉，如果这是一个愚蠢的错误，或者解决方案已经发布在某处

处理预览渲染的Javascript：

//预览当前文档状态
document.getElementById（“previewButton”）.addEventListener（“单击”，函数（）{
//清楚的
document.getElementById（“预览”）.innerHTML=“”；
//正确添加所有元素
var section=document.getElementById（“预览”）；
var id=“预览”；
用于（变量计数器=0；计数器<元素\u计数器；计数器++）{
var type=document.getElementById（计数器）.nodeName；
//If文本元素
如果（类型==“文本区域”）{
var段落=document.createElement（“p”）；
var text=document.getElementById（计数器）.value；
段落.setAttribute（“id”，id+计数器）；
段落.setAttribute（“类”、“流文本”）；
第3段.附加（案文）；
第2节（第2款）；
}
//中频图像元素
如果（类型=“输入”）{
var file=document.getElementById（计数器）.files[0]；
var reader=new FileReader（）；
reader.onload=函数（e）{
var image=document.createElement（“img”）；
image.setAttribute（“id”，id+计数器）；
setAttribute（“src”，即target.result）；
image.setAttribute（“类”、“材质框响应img”）；
第3节：追加子项（图像）；
}
reader.readAsDataURL（文件）；
}
}
});

---

这可能有效。没有你的代码我无法测试。然而，基本上工作原理是隔离一些变量，以便它们表示不同的实例化。然后立即将image元素添加到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);
    }());
}

---

OP的意思是，这些图片以一组的形式出现在段落下面。这可能与

reader.onload（）

的触发速度（时间）比代码的其余部分慢有关。@我的意思不是在文本旁边内联显示图像，而是避免在所有图像向下移动时混淆段落和图像的顺序。@GetSet我如何避免这种情况？我想既然循环是按这样显示的顺序迭代的，我可以通过增加延迟来解决这个问题，还是有更聪明的解决方案？你期望的顺序是什么？@ternalhour我现在在我的帖子中链接了一张图片，假设用户在编辑器中输入一张图片（id=0），一个文本区域“一些文本”（id=1），然后另一个文本区域“更多文本”（id=2）。预览应该先加载id=0，然后加载id=1，然后加载id=2，即迭代for循环。但是我的代码现在会显示“一些文本”（id=1），在“更多文本”（id=2）下面，然后是图像（id=0）。