PyScript 通过内置 display() 函数支持将 Python 执行结果精确输出到 HTML 中任意 DOM 元素（如 ），彻底解决传统 std-out 属性无法控制输出位置的限制，实现代码块与段落自然混排。
pyscript 通过内置 display() 函数支持将 python 执行结果精确输出到 html 中任意 dom 元素（如
），彻底解决传统 std-out 属性无法控制输出位置的限制，实现代码块与段落自然混排。
在使用 PyScript 构建交互式网页时，一个常见痛点是：默认情况下，
幸运的是，PyScript 提供了专为此场景设计的内置函数：display()。它无需导入，开箱即用，并通过 target 参数实现精准 DOM 定位输出。其核心行为如下：
- 若未指定 target，display(content) 将内容作为当前
元素的直接子节点插入（即紧随该标签内部，而非外部）； - 若指定 target="xxx"，则内容将被插入到 id="xxx" 的 DOM 元素内部（支持 innerHTML 方式追加）；
- 多次调用 display() 会按执行顺序依次追加，确保逻辑与视觉顺序一致。
以下是一个典型嵌入式用例，展示如何让 Python 输出自然穿插在 HTML 段落中：
<!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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2256" title="如此AI员工"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680269631809.png" alt="如此AI员工" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2256" title="如此AI员工">如此AI员工</a>
<p>国内首个全链路营销获客AI Agent</p>
</div>
<a href="/ai/2256" title="如此AI员工" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<py-script>
display("✅ 数据加载完成", target="intro-output")
</py-script>
<p>当前时间是：</p>
<py-script>
from datetime import datetime
display(datetime.now().strftime("%Y-%m-%d %H:%M:%S"))
</py-script>
<p>下方是计算结果：</p>
<py-script>
result = 123 * 456
display(f"123 × 456 = <strong>{result}</strong>", target="calc-result")
</py-script>
<div id="calc-result"></div>
<p>——内容结束 ——</p>
</body>
</html>✅ 关键要点与注意事项：
- target 必须指向一个已存在于 HTML 中的、具有唯一 id 的元素（建议在
前定义好目标容器，避免因执行时机导致找不到节点）； - display() 支持 HTML 字符串（如上例中的 ），渲染时会自动解析为 DOM 节点（注意 XSS 风险，生产环境需对用户输入做转义）；
- 不要混淆 std-out（仅用于重定向 print() 输出至指定元素，但不改变
自身位置）与 display()（主动控制任意位置插入）； - 若需清空某区域再写入，可先用原生 JS 操作：
from js import document; document.getElementById("my-target").innerHTML = "" 。
综上，display() 是 PyScript 实现“所写即所得”式交互内容嵌入的核心能力。掌握其 target 机制，即可自由构建图文混排、渐进式呈现、模块化交互的现代静态网站，无需后端或复杂构建流程。
