Excellent Data Filler

Appearance

Insert & Remove HTML ​

Dynamically inject new HTML elements or strip unwanted DOM nodes from target web pages during form automation.

Overview ​

The Insert & Remove HTML field type provides direct DOM tree manipulation capabilities. It can be used to insert custom helper buttons, dynamic verification notices, or inject missing form controls, as well as remove obstructive overlays, popups, or banners that hinder automated interaction.

Configuration Options ​

OptionTypeDescriptionRequiredDisabled When
Selector QueryText InputCSS selector or XPath targeting the reference DOM element.Yes—
Position of New HTML ContentDropdownRelative position where new HTML is inserted.When insertingWhen "Remove element" is ON
Remove exist element html before insert htmlToggle SwitchClears existing children before injecting content.NoWhen "Remove element" is ON
Remove elementToggle SwitchDeletes the matched target element from the DOM.No—

IMPORTANT

Remove Element Priority: When Remove element is turned ON, all insertion settings are deactivated. The field executes an immediate node deletion (element.remove()).

Insertion Positions ​

Select where to inject markup relative to the target element:

PositionDescriptionDOM Structure
beforebeginInserts immediately before the element itself (as preceding sibling).[NEW] <element>...</element>
afterbeginInserts inside the element, before its first child node.<element>[NEW] existing...</element>
beforeendInserts inside the element, after its last child node.<element>existing... [NEW]</element>
afterendInserts immediately after the element itself (as following sibling).<element>...</element> [NEW]
innerHTMLCompletely replaces all inner content of the target element.<element>[NEW]</element>

Detailed Configuration Breakdown ​

Selector Query ​

Defines the target element used as the reference anchor:

css
#content-wrapper
div.main-container
form#registration-form
.modal-overlay

HTML Content Payload ​

Provide the HTML markup either in the Default Value field or via an Excel column:

html
<div class="custom-alert alert-info">
  <span>Automated step running: <strong>{$BatchName$}</strong></span>
</div>

Practical Examples ​

Example 1: Inserting Alert Banner ​

text
Selector Query: .main-container
Position: afterbegin
HTML Content: <div class="alert alert-success">Form verified successfully!</div>
Remove exist element html: OFF
Remove element: OFF

Example 2: Purging Obstruction Overlay / Popup ​

text
Selector Query: .popup-overlay, #cookie-consent-banner
Remove element: ON

Example 3: Injecting Dynamic Profile Card ​

text
Selector Query: #user-profile-section
Position: beforeend
HTML Content:
  <div class="profile-card">
    <h4>{$FullName$}</h4>
    <p>Account ID: {$AccountID$}</p>
  </div>

Best Practices ​

Do's ​

  • Use Precise Selectors: Target specific containers to avoid altering unintended page regions.
  • Validate HTML Syntax: Ensure all tags are properly closed to prevent breaking page layout.
  • Prefer afterbegin / beforeend: Use child insertion rather than innerHTML when you wish to preserve existing buttons and listeners.

Don'ts ​

  • Do Not Remove Critical Elements: Ensure elements targeted with Remove element do not contain essential page scripts or state stores.
  • Do Not Insert Unsanitized External Script Tags: Keep injected markup restricted to standard semantic presentation elements.

Troubleshooting ​

IssueLikely CauseSolution
Content does not appearSelector query failed to locate elementConfirm element exists with Alt + Shift + I. Add a delay before running the field if dynamically rendered.
Element not removingTarget rendered inside an iframe or loaded lateEnsure the form page matches the active iframe URL or add a pre-delay.
Duplicate content createdForm re-executed or looped without clearingTurn ON Remove exist element html before insert html or use innerHTML.