---
url: >-
  https://plugin.stripo.email/extensions/reference/modification/HtmlNodeModifier.md
---
# HtmlNodeModifier

Interface for modifying HTML nodes within email templates.

```typescript
interface HtmlNodeModifier extends TemplateModifier<HtmlNodeModifier, CssNodeModifier>
```

## Description

`HtmlNodeModifier` provides methods for manipulating HTML elements, including content modification, attribute management, styling, and advanced features such as display conditions and structure management.

## Import

```typescript
import { HtmlNodeModifier } from '@stripoinc/ui-editor-extensions';
```

## Inheritance

Extends: [`TemplateModifier`](./TemplateModifier)

## Methods

### Content Modification Methods

#### setInnerHtml()

Replaces the inner HTML content of the current node.

```typescript
setInnerHtml(html: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `html` | `string` | The HTML string to set as inner content |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(element)
    .setInnerHtml('<p>New content</p>');
```

***

#### setText()

Updates the text content of an HTML text node.

```typescript
setText(newValue: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `newValue` | `string` | The new text value |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(textNode)
    .setText('Updated text content');
```

***

#### append()

Appends HTML content as the last child of the current node.

```typescript
append(html: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `html` | `string` | The HTML string to append |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(container)
    .append('<div class="new-section">Additional content</div>');
```

***

#### prepend()

Prepends HTML content as the first child of the current node.

```typescript
prepend(html: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `html` | `string` | The HTML string to prepend |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(container)
    .prepend('<header>Header content</header>');
```

***

#### replaceWith()

Replaces the current node with new HTML content.

```typescript
replaceWith(html: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `html` | `string` | The HTML string to replace the node with |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(oldElement)
    .replaceWith('<div class="replacement">New element</div>');
```

***

### Attribute Methods

#### setAttribute()

Sets or updates an attribute on the current HTML node.

```typescript
setAttribute(name: string, value: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `name` | `string` | The attribute name |
| `value` | `string` | The attribute value |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(link)
    .setAttribute('href', 'https://example.com')
    .setAttribute('target', '_blank');
```

***

#### removeAttribute()

Removes an attribute from the current HTML node.

```typescript
removeAttribute(name: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `name` | `string` | The attribute name to remove |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(element)
    .removeAttribute('data-old-value');
```

***

#### setValue()

Sets the value attribute for form elements.

```typescript
setValue(value: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `value` | `string` | The value to set |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(inputElement)
    .setValue('default text');
```

***

### Class Methods

#### setClass()

Adds a CSS class to the current node.

```typescript
setClass(name: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `name` | `string` | The CSS class name to add |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(element)
    .setClass('highlighted')
    .setClass('active');
```

***

#### removeClass()

Removes a CSS class from the current node.

```typescript
removeClass(name: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `name` | `string` | The CSS class name to remove |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(element)
    .removeClass('disabled');
```

***

#### setHiddenElementState()

Sets the device-specific hidden state for the current HTML node.

```typescript
setHiddenElementState(state: HideElementState): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `state` | [`HideElementState`](/extensions/reference/types/HideElementState) | The hidden state to apply |

**Returns:** `HtmlNodeModifier` for method chaining

**Usage Notes:**

* The editor resolves the canonical target node for the current HTML node (BLOCK, CONTAINER, STRUCTURE, STRIPE)
* Use `'desktop'` to hide the target on desktop
* Use `'mobile'` to hide the target on mobile
* Use `undefined` to clear the device-specific hidden state

**Example:**

```typescript
modifier.modifyHtml(element)
    .setHiddenElementState('mobile');
```

***

### Style Methods

#### setStyle()

Sets a CSS style property on the current node.

```typescript
setStyle(property: string, value: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `property` | `string` | The CSS property name |
| `value` | `string` | The CSS property value |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(element)
    .setStyle('background-color', '#f0f0f0')
    .setStyle('padding', '10px');
```

***

#### removeStyle()

Removes a CSS style property from the current node.

```typescript
removeStyle(property: string): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `property` | `string` | The CSS property name to remove |

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(element)
    .removeStyle('margin');
```

***

### Advanced Methods

#### delete()

Removes the current node from the DOM tree.

```typescript
delete(): HtmlNodeModifier
```

**Returns:** `HtmlNodeModifier` for method chaining

**Example:**

```typescript
modifier.modifyHtml(elementToRemove)
    .delete();
```

***

#### setDisplayCondition()

Sets a display condition for conditional visibility.

```typescript
setDisplayCondition(condition: DisplayCondition): HtmlNodeModifier
```

| Parameter | Type                                                                  | Description |
|-----------|-----------------------------------------------------------------------|-------------|
| `condition` | [`DisplayCondition`](/extensions/reference/types/DisplayCondition) | The display condition configuration |

**Returns:** `HtmlNodeModifier` for method chaining

**Usage Notes:**

* Display conditions control element visibility based on runtime evaluation
* Useful for personalization, A/B testing, and dynamic content
* Conditions are evaluated when the email is rendered

**Example:**

```typescript
modifier.modifyHtml(element)
    .setDisplayCondition({
        id: 1,
        name: 'Female',
        description: 'Only female customers will see this part of the email.',
        beforeScript: '{% if contact.gender == \"Female\" %}',
        afterScript: '{% endif %}'
    });
```

***

#### setNodeConfig()

Attaches custom configuration data to the node.

```typescript
setNodeConfig(config: Record<string, any>): HtmlNodeModifier
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `config` | `Record<string, any>` | Configuration object to attach |

**Returns:** `HtmlNodeModifier` for method chaining

**Usage Notes:**

* Store extension-specific data without using HTML attributes
* Configuration is preserved during template operations
* Synchronized across all users in collaborative editing

**Example:**

```typescript
modifier.modifyHtml(widgetNode)
    .setNodeConfig({
        widgetType: 'countdown',
        endDate: '2024-12-31T23:59:59Z',
        format: 'DD:HH:MM:SS',
        onExpiry: 'hide'
    });
```

***

#### multiRowStructureModifier()

Returns a modifier for creating and modifying email structures.

```typescript
multiRowStructureModifier(): MultiRowStructureModifier
```

**Returns:** [`MultiRowStructureModifier`](./MultiRowStructureModifier) - Interface for structure modifications

**Example:**

```typescript
modifier.modifyHtml(structureNode)
    .multiRowStructureModifier()
    .updateLayout(['33%', '34%', '33%']);
```