PyScript 通过内置 display() 函数支持将 Python 执行结果输出到指定 dom 元素（如 ），从而实现在 html 段落之间动态插入内容，彻底解决默认输出统一追加至页面末尾的问题。
pyscript 通过内置 display() 函数支持将 python 执行结果输出到指定 dom 元素（如
在使用 PyScript 构建交互式网页时，一个常见痛点是：默认情况下，所有
之间显示计算结果，却总是被迫“跳转”到页面最下方。
幸运的是，PyScript 提供了专为此场景设计的内置函数：display()。它无需导入，开箱即用，核心能力在于显式指定输出目标容器。其签名如下：
display(*objects, target=None, append=True, **kwargs)其中最关键的是 target 参数：传入一个字符串，对应页面中任意元素的 id 属性值，PyScript 将把内容插入该元素内部（默认追加，可通过 append=False 替换内容）。
✅ 正确实践示例
以下 HTML 片段展示了如何让 Python 输出精准落在
标签之间：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script defer src="https://pyscript.net/latest/pyscript.js"></script> </head> <body> <div id="intro-output"></div> <p>这是第一段介绍文字。</p> <py-script> from datetime import datetime display(f"当前时间：{datetime.now().strftime('%H:%M:%S')}", target="intro-output") </py-script> <p>这是第二段介绍文字。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/829" title="腾讯混元"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679977470363.png" alt="腾讯混元" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/829" title="腾讯混元">腾讯混元</a> <p>腾讯混元大由腾讯研发的大语言模型，具备强大的中文创作能力、逻辑推理能力，以及可靠的任务执行能力。</p> </div> <a href="/ai/829" title="腾讯混元" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <py-script> result = 123 * 456 display(f"计算结果：{result}", target="mid-result") </py-script> <p>这是第三段介绍文字。</p> <div id="mid-result"></div> <!-- 注意：此 div 必须在调用 display() 之后、但逻辑上属于此处 --> <p>这是第四段介绍文字。</p> </body> </html>渲染顺序严格遵循 HTML 结构与脚本执行顺序：
- #intro-output 的内容出现在首段
之前；
- #mid-result 的内容出现在第三段
之后、第四段
之前；
- 所有输出均脱离
标签的物理位置约束，实现语义化嵌入。
⚠️ 关键注意事项
- DOM 元素必须提前存在：display(target=”xxx”) 要求 id=”xxx” 的元素在脚本执行前已存在于 DOM 中（建议放在
标签之前定义，或确保文档加载完成）； - target 值区分大小写且不可含空格：务必与 HTML 中 id 属性值完全一致；
- 避免重复 ID：每个 id 在页面中必须唯一，否则行为未定义；
- print() 不受 target 控制：仅 display() 支持定向输出；若需重定向 print，可结合 sys.stdout 重写（进阶用法，不推荐初学者使用）；
- 性能友好：display() 是同步 DOM 操作，无额外异步开销，适合轻量级实时反馈。
? 小结
display(target=…) 是 PyScript 实现「内容流式嵌入」的核心机制。它让 Python 逻辑真正成为 HTML 内容生成的一部分，而非孤立的脚本模块。掌握这一模式，你就能自由构建如「段落中实时渲染公式结果」「图文混排中的动态数据卡片」「教程页内即时代码反馈」等专业级交互体验——无需框架、不依赖后端，纯前端即可交付。
从此，PyScript 不再只是“运行 Python”，而是“编织内容”。