Datastar.Elements (DatastarEx v0.1.0)
View SourceFunctions for patching and removing DOM elements.
This module provides utilities for updating HTML content on the client through Server-Sent Events.
Patching Elements
Update DOM elements with new HTML content:
sse
|> Datastar.Elements.patch("<div>New content</div>", selector: "#target")Patch Modes
:outer- Replace the entire element (default):inner- Replace only the inner HTML:prepend- Insert content at the beginning of the element's children:append- Insert content at the end of the element's children:before- Insert content before the element:after- Insert content after the element:replace- Replace the element with new content
Removing Elements
Remove elements from the DOM:
sse
|> Datastar.Elements.remove("#target")
|> Datastar.Elements.remove_by_id("my-element")Summary
Functions
Patches DOM elements with new HTML content.
Patches with :after mode (inserts after element)
Patches with :append mode (inserts at end)
Patches with :before mode (inserts before element)
Patches elements by ID.
Patches with :inner mode (replaces inner HTML)
Patches with :outer mode (replaces entire element)
Patches with :prepend mode (inserts at beginning)
Patches with :replace mode (replaces element)
Patches elements with formatted HTML using interpolation.
Removes elements from the DOM by selector.
Removes an element by ID.
Functions
@spec patch(Datastar.SSE.t(), String.t(), keyword()) :: Datastar.SSE.t()
Patches DOM elements with new HTML content.
Options
:selector- CSS selector for target elements (required):mode- Patch mode (default: :outer):use_view_transitions- Enable View Transitions API (default: false):event_id- Event ID for client tracking:retry- Retry duration in milliseconds
Examples
# Replace entire element
sse |> patch("<div>Content</div>", selector: "#target")
# Update inner HTML only
sse |> patch("<p>New text</p>", selector: ".content", mode: :inner)
# Append to element
sse |> patch("<li>Item</li>", selector: "ul", mode: :append)
# With view transitions
sse |> patch("<div>Smooth</div>", selector: "#box", use_view_transitions: true)Patches with :after mode (inserts after element)
Patches with :append mode (inserts at end)
Patches with :before mode (inserts before element)
@spec patch_by_id(Datastar.SSE.t(), String.t(), String.t(), keyword()) :: Datastar.SSE.t()
Patches elements by ID.
Convenience function for patching with an ID selector.
Example
sse |> patch_by_id("my-element", "<div>Content</div>")Patches with :inner mode (replaces inner HTML)
Patches with :outer mode (replaces entire element)
Patches with :prepend mode (inserts at beginning)
Patches with :replace mode (replaces element)
@spec patchf(Datastar.SSE.t(), String.t(), keyword(), keyword()) :: Datastar.SSE.t()
Patches elements with formatted HTML using interpolation.
Example
sse
|> patchf(
~s(<div class="user">%{name} - %{email}</div>),
[name: "Alice", email: "alice@example.com"],
selector: "#user-info"
)@spec remove(Datastar.SSE.t(), String.t(), keyword()) :: Datastar.SSE.t()
Removes elements from the DOM by selector.
Options
:event_id- Event ID for client tracking:retry- Retry duration in milliseconds
Example
sse
|> Datastar.Elements.remove(".temporary")
|> Datastar.Elements.remove("#old-content")@spec remove_by_id(Datastar.SSE.t(), String.t(), keyword()) :: Datastar.SSE.t()
Removes an element by ID.
Convenience function equivalent to calling remove/3 with an ID selector.
Example
sse |> remove_by_id("temporary-message")