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

因此，当我运行此代码时，发生的是这样的情况：第一页提醒我（触发错误），然后提醒我“如果我在错误之前看到此错误，则是问题所在”，然后才在页面上添加错误。 / p>

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

我在前端开发方面经验很少，因此欢迎提出任何建议。