pyscript 通过内置 display() 函数支持将 python 执行结果输出到指定 dom 元素（如 <div id="...">），从而实现在 html 段落之间动态插入内容，彻底解决默认输出统一追加至页面末尾的问题。
pyscript 通过内置 display() 函数支持将 python 执行结果输出到指定 dom 元素（如 <div id="...">），从而实现在 html 段落之间动态插入内容，彻底解决默认输出统一追加至页面末尾的问题。
在使用 PyScript 构建交互式网页时，一个常见痛点是：默认情况下，所有 <py-script> 标签的输出（尤其是 print() 或隐式返回值）会集中渲染在 <body> 底部或 <py-script> 自身闭合标签之后，导致无法自然穿插在 HTML 文本流中——例如你想在两段 <p> 之间显示计算结果，却总是被迫“跳转”到页面最下方。
幸运的是，PyScript 提供了专为此场景设计的内置函数：display()。它无需导入，开箱即用，核心能力在于显式指定输出目标容器。其签名如下：
display(*objects, target=None, append=True, **kwargs)
其中最关键的是 target 参数：传入一个字符串，对应页面中任意元素的 id 属性值，PyScript 将把内容插入该元素内部（默认追加，可通过 append=False 替换内容）。
✅ 正确实践示例
以下 HTML 片段展示了如何让 Python 输出精准落在 <p> 标签之间：
立即学习“前端免费学习笔记（深入）”；
<!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>
<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 的内容出现在首段 <p> 之前；
- #mid-result 的内容出现在第三段 <p> 之后、第四段 <p> 之前；
- 所有输出均脱离 <py-script> 标签的物理位置约束，实现语义化嵌入。
⚠️ 关键注意事项
- DOM 元素必须提前存在：display(target="xxx") 要求 id="xxx" 的元素在脚本执行前已存在于 DOM 中（建议放在 <py-script> 标签之前定义，或确保文档加载完成）；
- target 值区分大小写且不可含空格：务必与 HTML 中 id 属性值完全一致；
- 避免重复 ID：每个 id 在页面中必须唯一，否则行为未定义；
- print() 不受 target 控制：仅 display() 支持定向输出；若需重定向 print，可结合 sys.stdout 重写（进阶用法，不推荐初学者使用）；
- 性能友好：display() 是同步 DOM 操作，无额外异步开销，适合轻量级实时反馈。
? 小结
display(target=...) 是 PyScript 实现「内容流式嵌入」的核心机制。它让 Python 逻辑真正成为 HTML 内容生成的一部分，而非孤立的脚本模块。掌握这一模式，你就能自由构建如「段落中实时渲染公式结果」「图文混排中的动态数据卡片」「教程页内即时代码反馈」等专业级交互体验——无需框架、不依赖后端，纯前端即可交付。
从此，PyScript 不再只是“运行 Python”，而是“编织内容”。
