​
Inputs

​
☐ Prompt / Description (Required)

A clear and concise instruction describing what this step should do. This helps the AI debug and re-insert the element if needed.

Good Example: "Create a new div at the end of the body to display a custom notification."

Bad Example: "Put some new element somewhere on the page."

Why it’s bad? Too vague, lacks specificity about the element type, placement, and purpose.

​
☐ Element Selector (Required)

Define the target element relative to which the new element will be inserted:

CSS Selector

Use standard CSS selectors to identify the target element.

XPath

Use an XPath expression to precisely locate the target element.

​
☐ Insert Position (Required)

Choose where to place the new element relative to the target:

  • As last child – Places the new element inside and at the end of the target element

    <!-- Target element -->
<div class="parent">
  <p>Existing child</p>
  <!-- New element goes here -->
</div>

  • As first child – Places the new element inside and at the start of the target element

    <!-- Target element -->
<div class="parent">
  <!-- New element goes here -->
  <p>Existing child</p>
</div>

  • As previous sibling – Places the new element before the target element

    <!-- New element goes here -->
<!-- Target element -->
<div class="target">Content</div>

  • As next sibling – Places the new element after the target element

    <!-- Target element -->
<div class="target">Content</div>
<!-- New element goes here -->

  • Replace target element – Removes the target element and puts the new element in its place

    <!-- Target element will be replaced -->
<div class="target">Content</div>

<!-- Becomes -->
<!-- New element -->

​
☐ Element HTML (Required)

Define the HTML structure of the new element:

<div class="custom-notification">
  Your action was successful!
</div>

​
☐ Advanced Options (Optional)

  • Run Before Page Loaded: Create element before the page fully loads
  • Custom Attributes: Add data attributes, IDs, or classes

​
Usage Example

Scenario: Adding a notification div

​
✅ Good Prompt:

“Create a new div at the end of the body to display a custom notification.”

​
✅ Good Element Selector:

CSS Selector: body

​
✅ Element Configuration:

  • Insert Position: As last child
  • HTML Structure:
<div class="custom-notification">
  Your action was successful!
</div>

​
Notes

  • The Prompt / Description is required to help AI debug and adjust the element creation if needed.
  • Ensure the selector correctly identifies the target placement.
  • When replacing elements, verify that the original element isn’t critical to page functionality.
  • Test the created element’s styling and behavior to ensure it integrates properly with the page.