javascript - 只有在完成其他所有操作后，jQuery append 才会在文档上添加元素

Question

我正在尝试出于教育/娱乐原因构建应用程序。我在后端使用 python/flask 来呈现页面，并在前端使用一些普通的 js/jquery 来在必要时操作文档。到目前为止一切顺利，但我想添加图像上传功能。

基本思想是用户尝试上传图像，javascript 请求后端，后端进行验证，如果一切正常，则继续上传。同时我在前端使用socket.io，在后端使用flask_socketio，以向用户显示可能的错误，完成上传完成消息等

问题是，每当我使用 jQuery 附加一个元素时，这个元素只会在 javascript 块中的所有其他内容都已执行后才会被附加。

    socket.on('error', function(msg) {
        alert('error triggered');
        $('#test').append(`
            <div class="alert alert-warning mt-2" id="file_type_error" role="alert"> this type of file is not supported </div>
        `);
        alert('if i see this before error this is the problem');
    });

因此，当我运行此代码时，发生的事情是这样的：首页提醒我“触发了错误”，然后提醒我“如果我在错误之前看到这就是问题”，然后才在页面上添加错误。

这对我来说是个大问题，因为我还有其他 js 块，如果它们在块中执行其他所有内容之后附加元素，这完全影响了我的目标。

我在前端开发方面的经验很少，所以欢迎任何建议。