Element

Element is the DOM accessor JOPS returns from view.get(id) (and, as an array, from view.find(id)). It wraps one element of the view for reading and writing, with methods that chain and never throw.

You don’t construct it: get it from a view. Since 1.1.8 it is exported for type annotations (import { Element } from "jops-core"); importing it shadows the DOM’s global Element type in that file.

const title = this.get("title"); // Element

Learn more: Elements.

Methods

set()

set(html: string): Element

Sets the element’s innerHTML (plain text or HTML).

Returns the same wrapper, for chaining.

Caution

The value is not escaped. Pass values that come from users or the network through the layout tag: this.get("name").set(layout`${user.name}`).

this.get("username").set("Alice");
this.get("quote_id").set(layout`${quote.number}`);

set() replaces plain markup. Don’t use it to clear a container that holds subviews: call removeSubViews() first, otherwise the old views stay in the parent’s subViews.

attr()

attr(name: string, value?: string | number | boolean | null): Element

Sets an attribute on the element.

Parameters

• name: the attribute name, for example "href".
• value: the value. null or undefined removes the attribute; "" sets a boolean attribute (disabled, hidden, required).

Returns the same wrapper, for chaining.

this.get("quote_id")
  .set(layout`${quote.number}`)
  .attr("href", `#quote?id=${quote.id}`);

this.get("save").attr("disabled", "");    // disable
this.get("save").attr("disabled", null);  // enable again

Caution

attr() can’t inject HTML, but URL attributes (href, src) still accept javascript: URLs. Don’t put untrusted values into them unchecked.

value()

value(): string

Returns the element’s current innerHTML, or "" when no element has the id.

const current = this.get("username").value();

Properties

element

element: globalThis.Element | null

The underlying DOM element, for anything the wrapper doesn’t cover (classList, textContent, form properties). null when no element has that id.

this.get("status").element.classList.add("active");

Static methods

Element.from()

Element.from(element: HTMLElement, id: string): Element

Wraps an element you already have. This is how view.find(id) builds its results.

Missing elements and destroyed views

set(), attr() and value() never throw:

• No element with the id (usually a typo): they do nothing, value() returns "", and a warning with the id is logged.
• The view was destroyed (for example, an async request finished after the user left the screen): they do nothing, silently.

Code that uses element or view.domNode directly has no such guard; check for null yourself.