DOM Methods - NoMercy Docs

Overview

DOM construction helpers are re-exposed on the player so UI plugins can chain player.createElement(...) without importing a separate utility path. The standalone exports (createElement, createButton, etc.) are also importable directly from the core.

`createElement(type, id, unique?)`

Create a DOM element of type, assign it id, and return a fluent builder.

When unique is true, an existing element with the same id is returned instead of creating a duplicate, useful for singleton overlays that plugins may construct in mount() and check on re-mount.

Parameter	Type	Description
`type`	`keyof HTMLElementTagNameMap`	HTML tag name (`'div'`, `'canvas'`, `'section'`, …)
`id`	`string`	Element id
`unique`	`boolean`	Return existing element if id already exists

Returns: CreateElement<T>, a fluent builder

TypeScript

interface CreateElement<T extends Element> {
  get(): T;
  addClasses(names: string[]): AddClasses<T>;
  appendTo(parent: Element): AppendTo<T>;
  prependTo(parent: Element): AppendTo<T>;
}

TypeScript

const overlay = player
  .createElement('div', 'subtitle-overlay')
  .addClasses(['subtitle-overlay', 'hidden'])
  .appendTo(player.container)
  .get();

`createButton(id, label, onClick)`

Create an accessible <button> pre-wired with type="button", aria-label, title, and a click handler. Ready to insert, no additional attribute setup needed.

Parameter	Type	Description
`id`	`string`	Button id
`label`	`string`	`aria-label` and `title` value
`onClick`	`(event: Event) => void`	Click handler

Returns: HTMLButtonElement

TypeScript

const playBtn = player.createButton('play-btn', 'Play', () => player.play());
controls.appendChild(playBtn);

`createSVG(id, viewBox)`

Create an <svg> element in the SVG namespace with id, viewBox, and xmlns set. Caller appends path/use children directly.

Returns: SVGSVGElement

`addClasses(el, names)`

Add CSS class names to el (skips empty strings) and return a fluent AddClasses builder.

TypeScript

interface AddClasses<T extends Element> {
  get(): T;
  appendTo(parent: Element): AppendTo<T>;
  prependTo(parent: Element): AppendTo<T>;
  addClasses(names: string[]): AddClasses<T>;
  setAttribute(name: string, value: string): AddClasses<T>;
  setProperty(name: string, value: string): AddClasses<T>;
}

`removeClasses(el, names)`

Remove CSS class names from el (skips empty strings) and return the element itself. No fluent builder, removal is terminal.

Returns: T extends Element

Standalone exports

All helpers are also importable directly:

TypeScript

import {
  createElement,
  createButton,
  createSVG,
  addClasses,
  removeClasses,
} from '@nomercy-entertainment/nomercy-player-core';

Use the standalone form in plugins that receive a player via constructor injection, where this.player.createElement(...) reads more naturally than a bare import.