填充内部HTML

填充内部HTML 用于在页面上动态创建并插入一段 HTML 内容。它支持指定父元素、插入位置、附加 CSS 样式和脚本，常用于向页面注入提示条、临时按钮、标记或自定义 UI。

指令标识：CreateElement
指令类型：网页指令
指令描述：动态创建并插入 HTML 元素，支持插入位置、样式与脚本

先选使用方式

工作流支持「可视化编排」和「代码编排」两种创建方式。填充内部HTML 在两种方式里都能用，核心业务参数一致，区别主要是你通过界面配置，还是通过 Python 脚本配置。

方式	怎么用	适合人群
可视化编排（推荐先学）	拖入「填充内部HTML」节点，填写父元素、HTML 内容、插入位置	大多数用户，零代码，适合快速搭建和调试
代码编排（Python）	在脚本中调用 bots.createElement(selector="body", htmlContent="...")	熟悉代码、需要复用脚本或批量生成流程的用户

第一次使用建议先用可视化编排跑通，再迁移到 Python 代码编排。下方「参数说明」同时给出界面字段和代码参数名，方便两种方式对应。

什么时候用？

• 需要在页面上注入一段提示、标记或临时按钮辅助自动化。
• 需要向某个容器里插入自定义 HTML 内容。
• 需要配合 CSS、脚本，给页面临时加上自定义 UI。

使用前确认

• 页面已经加载完成，父元素（如 body 或指定容器）已经存在。
• 已经准备好要插入的 HTML 内容。
• 想清楚插入位置：作为子元素、替换、插在前/后等。

可视化编排：从 0 到跑通

下面用一个常见场景演示：在页面底部插入一条提示条。

1. 确认页面已经打开并加载完成。
2. 添加 填充内部HTML 节点。
3. 在 父元素选择器 填写 body，在 HTML 内容 填写要插入的片段：

<div style="padding:8px;background:#fffae6;">自动化执行中…</div>

4. 在 插入位置 选择作为最后一个子元素（LAST_CHILD）。
5. 运行后查看页面底部是否出现这条提示。

参数说明

输入参数

界面名称	代码属性名	类型	必填	默认值	说明
元素选择器	selector	String	是	-	插入位置的目标/参考元素的选择器。支持 CSS 选择器与 XPath，常见如 body、#container。
HTML 内容	htmlContent	String	是	-	要插入的 HTML 片段。
插入位置	insertPosition	Enum	否	LAST_CHILD	高级选项，支持 FIRST_CHILD、LAST_CHILD、BEFORE、AFTER、REPLACE、REPLACE_CHILD，默认 LAST_CHILD。
CSS 样式	cssStyles	String	否	-	高级选项，附加注入到页面的 CSS 样式文本。
脚本	javascriptCode	String	否	-	高级选项，插入后执行的 JavaScript 代码。
预加载脚本	preloadScript	String	否	-	高级选项，插入前执行的脚本，支持脚本内容或脚本 URL；执行失败不会中断流程。
等待元素出现（秒）	waitElementExists	Integer	否	10	高级选项，等待目标元素出现的最长时间，单位秒，默认 10 秒。
iframe 页面定位器	frameSelector	String	否	-	高级选项，目标元素在 iframe 中时填写。
查找元素高级配置	findElementOptions	JSON	否	-	高级 JSON 选项，用于配置查找元素的等待时间等。

输出参数

界面名称	代码属性名	类型	必填	说明
将结果保存至	outKey	String	否	保存创建结果信息（包含生成的元素 ID、插入位置、是否成功等）。

成功标准

• 填充内部HTML 节点运行结束后状态为成功。
• 运行日志中没有参数缺失、超时或执行失败等错误。
• 如果配置了输出变量，后续节点能够读取到符合预期的结果。
• 后续节点能够继续执行，流程没有因为该节点异常中断。

失败排查

现象 / 报错原文	可能原因	处理建议
日志报 HTML内容不能为空	没有填写 HTML 内容	在「HTML 内容」中填写要插入的片段
日志报 Parent element not found	父元素选择器找不到目标	检查父元素选择器，确认目标容器已经出现
插入了但位置不对	插入位置选择不符合预期	调整「插入位置」，例如改用 FIRST_CHILD 或 BEFORE
样式没生效	CSS 选择器与插入内容不匹配	检查 CSS 样式与插入 HTML 的类名/结构是否对应

Python 代码编排

代码编排以 Python 为主。运行上下文由代码编排模板创建，示例里只需要关注业务指令本身。

# 在页面底部插入一条提示条
bots.createElement(
    selector="body",
    htmlContent="<div style='padding:8px;background:#fffae6;'>自动化执行中…</div>",
    insertPosition="LAST_CHILD",
)

附加 CSS 样式：

bots.createElement(
    selector="#container",
    htmlContent="<button class='rpa-btn'>临时按钮</button>",
    insertPosition="FIRST_CHILD",
    cssStyles=".rpa-btn{color:#fff;background:#6c63ff;padding:6px 12px;}",
    outKey="createResult",
)

如果你想在工作流中通过节点动态编排指令，可使用 执行指令（XML）节点。

常见问题

Q1：插入位置都有哪些可选？

A： 常用的有 FIRST_CHILD（作为第一个子元素）、LAST_CHILD（作为最后一个子元素，默认）、BEFORE（插在目标元素之前）、AFTER（插在目标元素之后）、REPLACE（替换目标元素）、REPLACE_CHILD（替换目标元素的内部内容）。

Q2：可以同时注入样式和脚本吗？

A： 可以。通过「CSS 样式」注入样式，通过「脚本」在插入后执行 JS，通过「预加载脚本」在插入前执行 JS（预加载脚本执行失败不会中断流程）。

相关指令

• 浏览器自动化指令入门
• 执行JavaScript
• 获取元素HTML内容
• 点击元素（推荐）