Element Mutations

morph

Fast lightweight DOM diffing/patching without a virtual DOM.

cable_ready["MyChannel"].morph(
selector: "string", # required - string containing a CSS selector or XPath expression
html: "string", # [null] - the HTML to assign
children_only: true|false, # [null] - indicates if only child nodes should be morphed... skipping the parent element
permanent_attribute_name: "string", # [null] - an attribute name that prevents elements from being updated i.e. "data-permanent"
focus_selector: "string", # [null] - string containing a CSS selector
)

JavaScript Events

  • cable-ready:before-morph

  • cable-ready:after-morph

innerHTML

Sets the innerHTML of a DOM element.

cable_ready["MyChannel"].inner_html(
selector: "string", # required - string containing a CSS selector or XPath expression
focus_selector: "string", # [null] - string containing a CSS selector
html: "string" # [null] - the HTML to assign
)

JavaScript Events

  • cable-ready:before-inner-html

  • cable-ready:after-inner-html

outerHTML

Replaces a DOM element with new HTML.

cable_ready["MyChannel"].outer_html(
selector: "string", # required - string containing a CSS selector or XPath expression
focus_selector: "string", # [null] - string containing a CSS selector
html: "string" # [null] - the HTML to use as replacement
)

JavaScript Events

  • cable-ready:before-outer-html

  • cable-ready:after-outer-html

Sets the text content of a DOM element.

cable_ready["MyChannel"].text_content(
selector: "string", # required - string containing a CSS selector or XPath expression
text: "string" # [null] - the text to assign
)

JavaScript Events

  • cable-ready:before-text-content

  • cable-ready:after-text-content

Inserts HTML into the DOM relative to an element. Supports behavior akin to prepend & append.

cable_ready["MyChannel"].insert_adjacent_html(
selector: "string", # required - string containing a CSS selector or XPath expression
focus_selector: "string", # [null] - string containing a CSS selector
position: "string", # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)
html: "string" # [null] - the HTML to insert
)

JavaScript Events

  • cable-ready:before-insert-adjacent-html

  • cable-ready:after-insert-adjacent-html

Inserts text into the DOM relative to an element. Supports behavior akin to prepend & append.

cable_ready["MyChannel"].insert_adjacent_text(
selector: "string", # required - string containing a CSS selector or XPath expression
position: "string", # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)
text: "string" # [null] - the text to insert
)

JavaScript Events

  • cable-ready:before-insert-adjacent-text

  • cable-ready:after-insert-adjacent-text

remove

Removes an element from the DOM.

cable_ready["MyChannel"].remove(
selector: "string", # required - string containing a CSS selector or XPath expression
focus_selector: "string" # [null] - string containing a CSS selector
)

JavaScript Events

  • cable-ready:before-remove

  • cable-ready:after-remove

Sets a valid property on an element to a new value.

cable_ready["MyChannel"].set_property(
name: "string", # required - string containing a valid property
selector: "string", # required - string containing a CSS selector or XPath expression
value: "string" # [null] - the value to assign to the property
)

JavaScript Events

  • cable-ready:before-set-property

  • cable-ready:after-set-property

setValue

Sets the value of an element.

cable_ready["MyChannel"].set_value(
selector: "string", # required - string containing a CSS selector or XPath expression
value: "string" # [null] - the value to assign to the attribute
)

JavaScript Events

  • cable-ready:before-set-value

  • cable-ready:after-set-value