如何在Pyodide的runPython函数内修改HTML元素的textContent？

当然可以直接在Pyodide脚本里修改DOM元素的textContent，你遇到的问题是因为Pyodide同步执行Python代码时会阻塞JavaScript主线程——浏览器的UI渲染和事件处理都依赖主线程，循环过程中主线程被Python代码占满，根本没机会更新界面，只能等整个Python脚本跑完才会刷新，所以最后只显示循环的最后一个值99。

解决方法：让Python代码异步执行，让出主线程给UI渲染 #

Pyodide支持异步操作，你可以借助asyncio在循环中短暂让出控制权，让浏览器有机会更新DOM。下面是修改后的完整代码：

<head>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
</head>
<body>
    <div id="myDiv">Text that needs to change</div>
    <script>
        async function main() {
            let pyodide = await loadPyodide();
            await pyodide.loadPackage("asyncio"); // 加载asyncio异步包
            return pyodide;
        }

        let pyodideReadyPromise = main();
        async function pythonChange() {
            let pyodide = await pyodideReadyPromise;
            // 使用runPythonAsync执行异步Python代码
            await pyodide.runPythonAsync(`
                from js import document
                import asyncio

                print("started")

                async def update_div():
                    for i in range(100):
                        print(i)
                        document.getElementById("myDiv").textContent = str(i)
                        await asyncio.sleep(0)  // 让出控制权，让浏览器更新UI

                asyncio.run(update_div())
                print("finished")
                `);
        }
        pythonChange();
    </script>
</body>

关键改动说明： #

1. 加载asyncio包：Pyodide默认未预装该包，需要提前加载以支持异步操作
2. 用runPythonAsync替代runPython：允许执行异步Python代码，避免长时间阻塞主线程
3. 异步循环中加入await asyncio.sleep(0)：这一步会暂停Python执行，把控制权交还给JS事件循环，浏览器就能趁这个间隙更新DOM的显示内容

修改后，你就能看到div的内容从0到99依次变化，而不是直接跳到最后一个值了。

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