4.3 Render Note(代码渲染展示)

shmaur
2025-09-25
-
-

效果

代码预览效果
这个是HTML
这个是结构

一般用于代码脚本,它的工作原理是通过属性显示代码注释的HTML。

创建渲染笔记

  1. 使用 HTML 语言创建一个代码笔记,其中包含需要显示的内容(例如 )。<p>Hello Shmaur.</p>

  2. 创建渲染笔记

  3. 关系分配给先前创建的代码注释的点。renderNote

脚本动态显示内容

静态 HTML 通常不足以编写脚本。下一步是使用 JavaScript 自动更改笔记的某些部分。

对于一个简单的示例,我们将创建一个渲染注释,在字段中显示当前日期。

为此,请首先创建一个包含以下内容的 HTML 代码注释:

<h1>当前日期 & 时间</h1>
当前的日期 & 时间是: <span class="date"></span>
写进去

 

现在我们需要添加脚本。创建另一个代码,但这次是 JavaScript(前端)语言。确保新创建的注释是之前创建的 HTML 注释的直接子项;内容如下:

const $dateEl = api.$container.find(".date");
$dateEl.text(new Date());

现在,在任何位置创建一个渲染注释,并将其关系设置为指向 HTML 注释。访问渲染注释时,它将显示:~renderNote

动态渲染的结果

例子

 

“您的支持是我持续分享的动力”

微信收款码
微信
支付宝收款码
支付宝

目录关闭