AJAX调用前通过JS修改元素内容无法正常渲染显示的问题

问题出在你AJAX配置里的async: false。
浏览器的JS执行、页面渲染共用同一条主线程，同步AJAX请求会直接锁死这条线程直到请求完成：你虽然在发起请求前已经把#myText的innerHTML改成了loading...，但浏览器根本抽不出线程资源把这个DOM变更渲染到页面上，等请求返回后，代码又立刻把元素内容替换成了接口返回的data，所以你全程看不到loading提示——这和你观察到的「devTools里能看到DOM值确实被改过、删掉AJAX代码就能正常显示loading」的现象完全对应。

直接删除async: false这行配置即可。
jQuery的$.ajax默认就是异步请求（async: true），异步模式不会阻塞主线程：修改完loading文本后浏览器会立刻完成页面渲染，把loading提示展示给用户，等接口返回后再执行success回调替换成返回内容，完全匹配你的预期逻辑。

修复后的完整代码：

$(function() {
    $('#uploadBtn').click(function() {
        document.getElementById('myText').innerHTML = 'loading...'
        var form_data = new FormData($('#myForm')[0]);
        $.ajax({
            type: 'POST',
            url: '/flaskFunction',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                document.getElementById('myText').innerHTML = data
            }
        });
    });
});

补充说明：同步XMLHttpRequest已经被Web标准列为废弃特性，除了会导致你遇到的渲染阻塞问题，还会造成整个页面交互卡死，所有现代浏览器都不推荐使用，除非有极特殊的兼容场景，否则永远不要开启同步AJAX。

内容的提问来源于stack exchange，提问作者safnasfsa