API

Usage

Node

> npm install html-tag-builder

const { TagBuilder } = require('html-tag-builder');

const div = new TagBuilder('div').innerHTML('Hello World')
                                 .contentEditable()
                                 .caret('red')
                                 .style({ 'font-size': '2rem' });
console.log(div.build());

Depending on your node environment, you may not want, or have, browser based DOM logic, so you can alternatively use html-tag-builder in headless mode

Typescript Single File

In circumstances where you are using typescript to generate single-file-compiled scripts, there are many ways to add the index.d.ts file for type checking.

One way is to just install it with npm and then reference it:

/// <reference path="./node_modules/html-tag-builder/src/html-tag-builder.ts" />

Then just include the files in your tsconfig:

"compilerOptions": {
    "outFile": "src/index.js"
},
"include": [
    "./src/**/*",
    "./node_modules/html-tag-builder/src/**/*"
]

jsDelivr

<html>
   <head>
        <script src="https://cdn.jsdelivr.net/npm/html-tag-builder/src/html-tag-builder.min.js"></script>
   </head>
   <body>

        <script>
            const h1 = new TagBuilder('h1').innerHTML('Hello World').build();
            document.body.appendChild(h1);
        </script>
   </body>
</html>

Local js file

You can simply just import the html-tag-builder.js file into your local project

<html>
   <head>
        <script src="/js/html-tag-builder.js"></script>
   </head>
   <body>

        <script>
            const h1 = new TagBuilder('h1').innerHTML('Hello World').build();
            document.body.appendChild(h1);
        </script>
   </body>
</html>

Options

All options are static setters

scriptAsync( v )

This flag will automatically set the `aysnc` value of any `<script>` elements when created via `ScriptBuilder`

Arguments
- v: boolean = true
Usage
```
TagBuilderOptions.scriptAsync = true;
```

useOptionContentForEmptyOptionValue( v )

When creating options via the `OptionBuilder`, this flag will automatically create values for the `value` attribute based on the content given

The value created will always be lowercase

For example:

new OptionBuilder('Monday').build();

Will create:

<option value="monday">Monday</option>

It handles content with spaces as well:

new OptionBuilder('Last Friday of the Month').build();

Will create:

<option value="last-friday-of-the-month">Last Friday of the Month</option>

Arguments
- v: boolean = true

Usage

TagBuilderOptions.useOptionContentForEmptyOptionValue = true;

defaultInputType( v )

Arguments
- v: string = 'text'

Usage

TagBuilderOptions.defaultInputType = 'email';

headless mode allows you to use `html-tag-builder` without any `document` or `window` based browser logic. This mode will only return strings and requires you to use the `buildHTML()` builder method

document mode uses `document` and `window` based logic to create document elements using `document.createElement()`. This mode returns HTMLElements which give you the ability to interact with the element's native properties, events and values and allows for accessing that element via the `build()` builder method

Arguments
- v: 'headless' | 'document' = 'document'

Usage

TagBuilderOptions.mode = 'headless';
const tag = new TagBuilder('div').innerHTML('foobar').buildHTML();
console.log(tag); // <div>foobar</div>

TagBuilderOptions.mode = 'document';
const tag = new TagBuilder('div').innerHTML('foobar').build();
console.log(tag); // HTMLElement

TagBuilder Pattern Methods

attr( key, value )

Returns: TagBuilder<HTMLElement>

Alias for element.setAttribute()

Arguments
- key: string
- value: any

Usage

new TagBuilder('div').attr('data-scroll', true);

slot( value )

Returns: TagBuilder<HTMLElement>

Assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value

Arguments
- value: string

Usage

new TagBuilder('div').slot('description');

See also:
- MDN slot

tabindex( index )

Returns: TagBuilder<HTMLElement>

An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position

Arguments
- index: number
Usage
```
new TagBuilder('div').tabindex('-1');
```
See also:
- MDN tabindex

append( child )

Returns: TagBuilder<HTMLElement>

Inserts a set of tag builder objects or DOMString objects after the last child of the Element. DOMString objects are inserted as equivalent Text nodes

Arguments
- child: ...(html | TagBuilder)[]

Usage

//example using plain text
new TagBuilder('div').append('foobar foobaz foodad');

//example using a tag builder object
new TagBuilder('div').append(new TagBuilder('div').innerHTML('foobar'));

//data types can be used in tandem:
new TagBuilder('div').append('foobar', new TagBuilder('div').innerHTML('foodad'));

See also:
- MDN append

prepend( child )

Returns: TagBuilder<HTMLElement>

Inserts a set of tag builder objects or DOMString objects before the first child of the Element. DOMString objects are inserted as equivalent Text nodes

Arguments
- child: ...(html | TagBuilder)[]

Usage

//example using plain text
new TagBuilder('div').prepend('foobar foobaz foodad');

//example using a tag builder object
new TagBuilder('div').prepend(new TagBuilder('div').innerHTML('foobar'));

//data types can be used in tandem:
new TagBuilder('div').prepend('foobar', new TagBuilder('div').innerHTML('foodad'));

See also:
- MDN prepend

insertAdjacent( sibling, placement )

Returns: TagBuilder<HTMLElement>

Insert a sibling adjacent to the owning element. This is only guaranteed to work in `headless` mode

Arguments
- sibling: TagBuilder
- placement: 'after' | 'before' = 'after'

Usage

new TagBuilder('div').insertAdjacent(new TagBuilder('div') 'before');

innerHTML( html )

Returns: TagBuilder<HTMLElement>

A DOMString containing the HTML serialization of the element's descendants. Setting the value of innerHTML removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string htmlString

Arguments
- html: string

Usage

new TagBuilder('div').innerHTML('foobar');

See also:
- MDN innerHTML

bounds( width, height )

Returns: TagBuilder<HTMLElement>

Set the width and height css properties of the element using CSS values

Arguments
- width: string
- height: string

Usage

new TagBuilder('div').bounds('100px', '50%');

classes( ...aClass )

Returns: TagBuilder<HTMLElement>

Add classes to the element

Arguments
- ...aClass: string[]

Usage

new TagBuilder('div').classes('foo', 'bar', 'baz', 'dad');

height( height )

Returns: TagBuilder<HTMLElement>

Set the height of the element

Arguments
- height: string
Usage
```
new TagBuilder('div').height('100px');
```

margin( ...cssShorthand )

Returns: TagBuilder<HTMLElement>

CSS margin short-hand equivalent rest parameters. This behaves exactly like you would use in CSS files

Arguments
- ...cssShorthand: string[]

Usage

//apply to all sides:
new TagBuilder('div').margin('5px'); //CSS equivalent = margin: 5px;

//apply to vertical | horizontal
new TagBuilder('div').margin('5px', '10px'); //CSS equivalent = margin: 5px 10px;

//apply to top | horizontal | bottom
new TagBuilder('div').margin('5px', '10px', '8px'); //CSS equivalent = margin: 5px 10px 8px;

//apply to top | right | bottom | left
new TagBuilder('div').margin('5px', '6px', '7px', '8px'); //CSS equivalent = margin: 5px 6px 7px 8px;

See also:
- MDN margin

origin( top?, right?, bottom?, left? )

Returns: TagBuilder<HTMLElement>

Set position properties using CSS values. If the argmuents are null or undefined they will be ignored

Arguments
- top?: string
- right?: string
- bottom?: string
- left?: string

Usage

//setting the left property ignoring the rest
new TagBuilder('div').origin(null, null, null, '-10px'); //CSS equivalent = left: -10px;

padding( ...cssShorthand )

Returns: TagBuilder<HTMLElement>

CSS padding short-hand equivalent rest parameters. This behaves exactly like you would use in CSS files

Arguments
- ...cssShorthand: string[]

Usage

//apply to all sides:
new TagBuilder('div').padding('5px'); //CSS equivalent = padding: 5px;

//apply to vertical | horizontal
new TagBuilder('div').padding('5px', '10px'); //CSS equivalent = padding: 5px 10px;

//apply to top | horizontal | bottom
new TagBuilder('div').padding('5px', '10px', '8px'); //CSS equivalent = padding: 5px 10px 8px;

//apply to top | right | bottom | left
new TagBuilder('div').padding('5px', '6px', '7px', '8px'); //CSS equivalent = padding: 5px 6px 7px 8px;

See also:
- MDN padding

position( value )

Returns: TagBuilder<HTMLElement>

Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements

Arguments
- value: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky'

Usage

new TagBuilder('div').position('relative');

See also:
- MDN position

style( obj )

Returns: TagBuilder<HTMLElement>

CSS property-value pairs. Each property/value pair you provide is validated against using the users agents native window.CSS.supports()method. Anything that is not supported will be ignored

Notice how the usage example demonstrates the names of the CSS properties are not the javascript camelcase variants, they are the CSS property names as-is

Arguments
- obj: { [key: string]: string | number | boolean }

Usage

new TagBuilder('div').style({
    'padding-left': '20px',
    position: 'relative',
    color: 'red',
    'border-top-left-radius' : '2.5em'
});

width( width )

Returns: TagBuilder<HTMLElement>

Set the width of the element

Arguments
- width: string
Usage
```
new TagBuilder('div').width('100px');
```

on( event, listener )

Returns: TagBuilder<HTMLElement>

Sets up a function that will be called whenever the specified event is delivered to the target

Arguments
- event: keyof GlobalEventHandlersEventMap
- listener: (this: HTMLElement, env: Event)

Usage

new TagBuilder('div').on('click', () => alert('Hello World'));

See also:
- MDN addEventListener

clone()

Returns: TagBuilder<HTMLElement>

Clone the current tag builder. This deep clones the node it respectively manages

Note: this uses the same HTMLElement.cloneNode() method native to browsers, therefor, things like id's and individual configurations for a given node will be duplicated as-is

Usage
```
new TagBuilder('div').clone();
```

build()

Returns: HTMLElement

The node the current builder manages as an HTMLElement

Usage
```
new TagBuilder('div').build();
```

buildHTML()

Returns: HTMLElement

This is the required build method when in `headless` mode. It returns the outerHTML of an HTMLElement when in `document` mode, otherwise the HTML markup when in `headless` mode

Usage
```
new TagBuilder('div').buildHTML();
```

accessKey( value )

Returns: TagBuilder<HTMLElement>

Provides a hint for generating a keyboard shortcut for the current element

Arguments
- value: string
Usage
```
new TagBuilder('div').accessKey('s');
```
See also:
- MDN accesskey

inputmode( value )

Returns: TagBuilder<HTMLElement>

Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on <input> elements, but is usable on any element while in contenteditable mode

Arguments
- value: string

Usage

new TagBuilder('div').inputmode('email');

See also:
- MDN inputmode

contentEditable()

Returns: TagBuilder<HTMLElement>

Coerce an element into being editable by the user. The browser modifies this tag to allow editing

Usage

new TagBuilder('div').contentEditable();

See also:
- MDN contenteditable

dir( value )

Returns: TagBuilder<HTMLElement>

Directionality of the element's text

Arguments
- value: 'ltr' | 'rtl' | 'auto'
Usage
```
new TagBuilder('div').dir('ltr');
```
See also:
- MDN dir

draggable()

Returns: TagBuilder<HTMLElement>

Coerces an element into being draggable. Use the Drag and Drop API

Usage
```
new TagBuilder('div').draggable();
```
See also:
- MDN draggable

hidden()

Returns: TagBuilder<HTMLElement>

Coerces an element to indicate that it is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown

Usage
```
new TagBuilder('div').hidden();
```
See also:
- MDN hidden

spellcheck()

Returns: TagBuilder<HTMLElement>

Coerce the element to be checked for spelling errors

Usage
```
new TagBuilder('div').spellcheck();
```
See also:
- MDN spellcheck

title( title )

Returns: TagBuilder<HTMLElement>

Sets the text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip

Arguments
- title: string
Usage
```
new TagBuilder('div').title('foobar');
```
See also:
- MDN title

innerText( text )

Returns: TagBuilder<HTMLElement>

Represents the "rendered" text content of a node and its descendants

`innerText` is easily confused with Node.textContent, but there are important differences between the two. Basically, `innerText` is aware of the rendered appearance of text, while `textContent` is not

Arguments
- text: string

Usage

new TagBuilder('div').innerText('foobar');

See also:
- MDN innerText

autocapitalize( value )

Returns: TagBuilder<HTMLElement>

Controls whether and how text input is automatically capitalized as it is entered/edited by the user

Arguments
- value: 'off' | 'on' | 'none' | 'sentences' | 'words' | 'characters'

Usage

new TagBuilder('div').autocapitalize('words');

See also:
- MDN autocapitalize

caret( color )

Returns: TagBuilder<HTMLElement>

Set the css caret-color property of the element

Arguments
- color: string

Usage

new TagBuilder('div').caret('red');

//or with any other CSS color value
new TagBuilder('div').caret('#FFFFFF');

See also:
- MDN caret-color

textcase( transform )

Returns: TagBuilder<HTMLElement>

Transform text to a specfic case using the CSS text-transform property

Arguments
- transform: 'uppercase' | 'lowercase' | 'none' | 'capitalize' | 'inherit'

Usage

new TagBuilder('div').textcase('uppercase');

See also:
- MDN text-transform

visibility( value )

Returns: TagBuilder<HTMLElement>

The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a `<table>`

Arguments
- value: 'visible' | 'hidden' | 'collapse'

Usage

new TagBuilder('div').visibility('hidden');

See also:
- MDN visibility

screenReaderOnly()

Returns: TagBuilder<HTMLElement>

Set the element to explicitly be for screen readers only, using the WCAG Standards

This will automatically add the following styles inline to the element:

element {
    border: 0,
    clip: rect(0 0 0 0),
    height: 1px,
    margin: -1px,
    overflow: hidden,
    padding: 0,
    position: absolute,
    width: 1px
}

Usage

new TagBuilder('div').screenReaderOnly();

static TagBuilder.parse( html )

Returns: TagBuilder<HTMLElement>

Parse an html string of HTML elements and cast that element to a TagBuilder

Please note, this only considers HTMLElement.nodeType of 1. Meaning this ignores comments, and document fragments and text nodes etc

This method honors attributes in the string

Arguments
- html: string

Usage

const tag = TagBuilder.parse('<ul><li>foo</li><li>bar</li><li>baz</li><li>dad</li></ul>');

TabBuilder Subclasses

In order to help facilitate a semantic HTML experience and self-documenting code, there are numerous TagBuilder subclasses at your disposal to quickly create specific elements but also semantic-driven elements . These subclasses have unique methods respective to their purpose, for example, the TableBuilder has an addRow() method to quickly add a <tr> with data and the ListBuilder has an addSublist() method to add a sublist to a <ul> or <ol>, the semantic proper way by wrapping the sublist in a <li>

AnchorBuilder

This element builder is used to create a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address

Documentation

constructor( href, target?, id? )

Returns: AnchorBuilder<HTMLAnchorElement>

Arguments
- href: string
- target?: '_self' | '_blank' | '_parent' | '_top' = 'self'
- id?: string
Usage
```
new AnchorBuilder('www.example.com');
```
See also:
- MDN a

hreflang( lang )

Returns: AnchorBuilder<HTMLAnchorElement>

Hints at the human language of the linked URL. No built-in functionality

Arguments
- lang: string

Usage

new AnchorBuilder('www.example.com').hreflang('en');

See also:
- MDN a#attr-hreflang

mimeType( value )

Returns: AnchorBuilder<HTMLAnchorElement>

Hints at the linked URL’s format with a MIME type

Arguments
- value: string

Usage

new AnchorBuilder('www.example.com').mimeType('image/png');

See also:
- MDN a#attr-type

ping( urls )

Returns: AnchorBuilder<HTMLAnchorElement>

A list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking

Arguments
- urls: string[]

Usage

new AnchorBuilder('www.example.com').ping(['somelink.php', 'someotherlink.php']);

rel( value )

Returns: AnchorBuilder<HTMLAnchorElement>

The relationship of the linked URL as space-separated link types

Arguments
- value: string

Usage

new AnchorBuilder('www.example.com').rel('noopener');

See also:
- MDN Link_types

AreaBuilder

This element builder is used to create an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext link

Documentation

constructor( coords, shape?, id? )

Returns: AreaBuilder<HTMLAreaElement>

Arguments
- coords: string
- shape?: 'rect' | 'circle' | 'poly' | 'default'
- id?: string
Usage
```
new AreaBuilder('www.example.com');
```
See also:
- MDN area

href( url, alt )

Returns: AreaBuilder<HTMLAreaElement>

The hyperlink target for the area. Its value is a valid URL. This attribute may be omitted; if so, the <area> element does not represent a hyperlink

Arguments
- url: string
- alt: string

Usage

new AreaBuilder('www.example.com').href('www.myimage.com', 'This image is mine');

hreflang( lang )

Returns: AreaBuilder<HTMLAreaElement>

Hints at the human language of the linked URL. No built-in functionality

Arguments
- lang: string

Usage

new AreaBuilder('www.example.com').hreflang('en');

See also:
- MDN a#attr-hreflang

ping( urls )

Returns: AreaBuilder<HTMLAreaElement>

A list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking

Arguments
- urls: string[]

Usage

new AreaBuilder('www.example.com').ping(['somelink.php', 'someotherlink.php']);

rel( value )

Returns: AreaBuilder<HTMLAreaElement>

The relationship of the linked URL as space-separated link types

Arguments
- value: string

Usage

new AreaBuilder('www.example.com').rel('noopener');

See also:
- MDN Link_types

target( value )

Returns: AreaBuilder<HTMLAreaElement>

A keyword or author-defined name of the browsing context to display the linked resource

Arguments
- value: '_self' | '_blank' | '_parent' | '_top'

Usage

new AreaBuilder('www.example.com').target('_self');

AudioBuilder

This element builder is used to create embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream

Documentation

constructor( src, id? )

Returns: AudioBuilder<HTMLAudioElement>

Arguments
- src: string
- id?: string

Usage

new AudioBuilder('www.example.com/audio.mp3');

See also:
- MDN audio

addFallbackSrc( src, type )

Returns: AudioBuilder<HTMLAudioElement>

Add a source for browsers that don't support main src

Provide url and mimetype of url content

Arguments
- src: string
- type: string

Usage

new AudioBuilder('www.example.com/audio.mp3').addFallbackSrc('www.example.com/audio.wma', 'audio/mwa');

loop()

Returns: AudioBuilder<HTMLAudioElement>

The audio player will automatically seek back to the start upon reaching the end of the audio

Usage

new AudioBuilder('www.example.com/audio.mp3').loop();

muted()

Returns: AudioBuilder<HTMLAudioElement>

Mutes the element

Usage

new AudioBuilder('www.example.com/audio.mp3').muted();

noControls()

Returns: AudioBuilder<HTMLAudioElement>

Indicates that the browser will not offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback

Usage

new AudioBuilder('www.example.com/audio.mp3').noControls();

onNotSupported( html )

Returns: AudioBuilder<HTMLAudioElement>

HTML or text to be displayed for browsers that do not support this element

Arguments
- html: string

Usage

new AudioBuilder('www.example.com/audio.mp3').onNotSupported('<div>Not supported in this browser</div>');

preload( value )

Returns: AudioBuilder<HTMLAudioElement>

Provide a hint to the browser about what the author thinks will lead to the best user experience

Arguments
- value: 'none' | 'metadata' | 'auto' = 'auto'

Usage

new AudioBuilder('www.example.com/audio.mp3').preload('auto');

See also:
- MDN track

track( src, kind, isDefault?, srclang?, label? )

Returns: AudioBuilder<HTMLAudioElement>

Specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks

Arguments
- src: string
- kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata'
- isDefault?: boolean
- srclang?: string
- label?: string

Usage

new AudioBuilder('www.example.com/audio.mp3').track('/media/examples/source.vtt', 'captions', true, 'en');

BlockquoteBuilder

This element builder is used to create an element that indicates the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the `<cite>` element

Documentation

constructor( cite?, id? )

Returns: BlockquoteBuilder<HTMLQuoteElement>

Arguments
- cite?: string
- id?: string

Usage

new BlockquoteBuilder('https://www.huxley.net/bnw/four.html');

See also:
- MDN blockquote

CheckboxInputBuilder extends InputBuilder

This element builder is used to create a check box allowing single values to be selected/deselected

Documentation

constructor( isIndeterminate?, id? )

Returns: CheckboxInputBuilder<HTMLInputElement>

Arguments
- isIndeterminate?: boolean
- id?: string
Usage
```
new CheckboxInputBuilder();
```
See also:
- MDN checkbox

checked()

Returns: CheckboxInputBuilder<HTMLInputElement>

Indicated that the radio button is checked

Usage
```
new CheckboxInputBuilder().checked();
```

ColGroupBuilder

This element builder is used to create a group of columns within a table

Documentation

constructor( id? )

Returns: ColGroupBuilder<HTMLElement>

Arguments
- id?: string
Usage
```
new ColGroupBuilder();
```
See also:
- MDN colgroup

addCol( span?, ...aClass )

Returns: ColGroupBuilder<HTMLElement>

Arguments
- span?: number
- ...aClass: string[]

Usage

new ColGroupBuilder().addCol(2, 'myClass');

DataBuilder

This element builder is used to create an element that links a given piece of content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used

Documentation

constructor( value, id? )

Returns: DataBuilder<HTMLDataElement>

Arguments
- value: string
- id?: string
Usage
```
new DataBuilder();
```
See also:
- MDN data

DataListBuilder

This element builder is used to create an element that contains a set of `<option>` elements that represent the permissible or recommended options available to choose from within other controls

Documentation

constructor( id )

Returns: DataListBuilder<HTMLDataListElement>

id is required

Arguments
- id: string
Usage
```
new DataListBuilder();
```
See also:
- MDN datalist

addOption( content, value, classes? )

Returns: DataListBuilder<HTMLDataListElement>

Add an `<option>` element to the datalist

Arguments
- content: string
- value: string
- classes?: string[]

Usage

new DataListBuilder().addOption('pick this option', 'option1');

addOptions( ...option )

Returns: DataListBuilder<HTMLDataListElement>

Arguments
- ...option: (html | OptionBuilder)[]

Usage

new DataListBuilder().addOptions('pick this option', new OptionBuilder('option 2'));

DateInputBuilder extends NumberInputBuilder

This element builder is used to create a control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers

Documentation

constructor( value?, id? )

Returns: DateInputBuilder<HTMLInputElement>

Arguments
- value?: string
- id?: string
Usage
```
new DateInputBuilder('2018-07-22');
```
See also:
- MDN date

DateTimeLocalInputBuilder extends DateInputBuilder

This element builder is used to create a control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers

Documentation

constructor( value?, id? )

Returns: DateTimeLocalInputBuilder<HTMLInputElement>

Arguments
- value?: string
- id?: string
Usage
```
new DateTimeLocalInputBuilder();
```
See also:
- MDN datetime-local

DetailsBuilder

This element builder is used to create a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the `<summary>` element

Documentation

constructor( summary?, open?, id? )

Returns: DetailsBuilder<HTMLDetailsElement>

Arguments
- summary?: string
- open?: boolean
- id?: string
Usage
```
new DetailsBuilder();
```
See also:
- MDN details

DLBuilder

This element builder is used to create an element that represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs)

Documentation

constructor( wrapDtDdGroupsInDiv?, groupsDivClasses?, id? )

Returns: DLBuilder<HTMLDListElement>

Semantic HTML allows for premitted content to be one or more `<div>` elements if you don't want the `<dt>` and `<dd>` elements to be direct descendants

Arguments
- wrapDtDdGroupsInDiv?: boolean
- groupsDivClasses?: classes
- id?: string
Usage
```
new DLBuilder();
```
See also:
- MDN dl#wrapping_name-value_groups_in_htmlelementdiv_elements

addTerm( term, ...dd(string | TagBuilder) )

Returns: DLBuilder<HTMLDListElement>

Arguments
- term: string
- ...dd(string | TagBuilder)[]
Usage
```
new DLBuilder();
```

DownloadAreaBuilder extends AreaBuilder

An extended class of AreaBuilder that creates an `<area>` tag specifically meant to act as a clickable download link

Documentation

constructor( filename, coords, shape?, id? )

Returns: DownloadAreaBuilder<HTMLAreaElement>

Arguments
- filename: string
- coords: string
- shape?: 'rect' | 'circle' | 'poly' | 'default'
- id?: string

Usage

new DownloadAreaBuilder('mydownloadfilename.png', '130,160,60');

DownloadLinkBuilder extends AnchorBuilder

An extended class of AnchorBuilder that creates an `<a>` tag specifically meant to act as a clickable download link

Documentation

constructor( href, filename, id? )

Returns: DownloadLinkBuilder<HTMLAnchorElement>

Arguments
- href: string
- filename: string
- id?: string

Usage

new DownloadLinkBuilder('www.example.com/api/file.json', 'api_example.json');

EmailInputBuilder extends TextInputBuilder

This element builder is used to create a field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards

Documentation

constructor( id? )

Returns: EmailInputBuilder<HTMLInputElement>

Arguments
- id?: string
Usage
```
new EmailInputBuilder();
```

multiple()

Returns: EmailInputBuilder<HTMLInputElement>

Usage
```
new EmailInputBuilder().multiple();
```

EmbedBuilder

This element builder is used to create an element that embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in

Documentation

constructor( src, type, id? )

Returns: EmbedBuilder<HTMLInputElement>

Provide the src url and MIME type

Arguments
- src: string
- type: string
- id?: string
Usage
```
new EmbedBuilder();
```
See also:
- MDN embed

FieldsetBuilder

This element builder is used to group several controls as well as labels (`<label>`) within a web form

Documentation

constructor( legend?, id? )

Returns: FieldsetBuilder<HTMLFieldSetElement>

Arguments
- legend?: string
- id?: string
Usage
```
new FieldsetBuilder();
```
See also:
- MDN fieldset

FigureBuilder

This element builder is used to create an element that represents self-contained content, potentially with an optional caption

Documentation

constructor( caption?, captionPlacement?, id? )

Returns: FigureBuilder<HTMLElement>

Arguments
- caption?: html
- captionPlacement?: 'top' | 'bottom'
- id?: string
Usage
```
new FigureBuilder();
```
See also:
- MDN figure

FileInputBuilder extends InputBuilder

This element builder is used to create a control that lets the user select a file. Use the accept attribute to define the types of files that the control can select

Documentation

constructor( accept?, id? )

Returns: FileInputBuilder<HTMLInputElement>

Arguments
- accept?: string
- id?: string
Usage
```
new FileInputBuilder();
```
See also:
- MDN file

FormBuilder

This element builder is used to create a document section containing interactive controls for submitting information

Documentation

constructor( actionUrl, method?, id? )

Returns: FormBuilder<HTMLFormElement>

Arguments
- actionUrl: string
- method?: string
- id?: string
Usage
```
new FormBuilder('submit.php', 'post');
```
See also:
- MDN form

acceptCharset( ...value )

Returns: FormBuilder<HTMLFormElement>

Arguments
- ...value: string[]

Usage

new FormBuilder('submit.php', 'post').acceptCharset(['utf-8']);

enctype( value )

Returns: FormBuilder<HTMLFormElement>

Arguments
- value: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Usage

new FormBuilder('submit.php', 'post').acceptCharset(['utf-8']);

rel( value )

Returns: FormBuilder<HTMLFormElement>

The relationship of the linked URL as space-separated link types

Arguments
- value: string

Usage

new FormBuilder('submit.php', 'post').rel('noopener');

See also:
- MDN Link_types

target( value )

Returns: FormBuilder<HTMLFormElement>

Indicates where to display the response after submitting the form

Arguments
- value: '_self' | '_blank' | '_parent' | '_top'

Usage

new FormBuilder('submit.php', 'post').target('_self');

noValidate()

Returns: FormBuilder<HTMLFormElement>

Indicates that the form shouldn't be validated when submitted

Usage

new FormBuilder('submit.php', 'post').noValidate();

IframeBuilder

This element builder is used to create a inline frame element (`<iframe>`) that represents a nested browsing context, embedding another HTML page into the current one

Documentation

constructor( src, id? )

Returns: IframeBuilder<HTMLIframeElement>

The URL of the page to embed. Use a value of `about:blank` to embed an empty page that conforms to the same-origin policy. Also note that programmatically removing an `<iframe>`'s src attribute (e.g. via Element.removeAttribute()) causes `about:blank` to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS

Arguments
- src: string
- id?: string

Usage

new IframeBuilder('www.example.com/index.html');

See also:
- MDN iframe

allow( value )

Returns: IframeBuilder<HTMLIframeElement>

Specifies a feature policy for the `<iframe>`. The policy defines what features are available to the `<iframe>` based on the origin of the request (e.g. access to the microphone, camera, battery, web-share API, etc.)

Arguments
- value: string

Usage

new IframeBuilder('www.example.com/index.html').allow('microphone fullscreen');

referrerPolicy( value )

Returns: IframeBuilder<HTMLIframeElement>

Arguments
- value: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'

Usage

new IframeBuilder('www.example.com/index.html').referrerPolicy('origin');

sandbox( value )

Returns: IframeBuilder<HTMLIframeElement>

Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions

Arguments
- value: 'allow-downloads' | 'allow-forms' | 'allow-modals' | 'allow-orientation-lock' | 'allow-pointer-lock' | 'allow-popups' | 'allow-popups-to-escape-sandbox' | 'allow-presentation' | 'allow-same-origin' | 'allow-scripts' | 'allow-top-navigation' | 'allow-top-navigation-by-user-activation' | string

Usage

new IframeBuilder('www.example.com/index.html').sandbox('');

srcdoc( value )

Returns: IframeBuilder<HTMLIframeElement>

Inline HTML to embed, overriding the src attribute. If a browser does not support the srcdoc attribute, it will fall back to the URL in the src attribute

Arguments
- value: string

Usage

new IframeBuilder('www.example.com/index.html').srcdoc('<h1>Hello World</h1>');

ImageBuilder

This element builder is used to create an element that embeds an image into the document

Documentation

constructor( src, alt, id? )

Returns: ImageBuilder<HTMLImageElement>

Arguments
- src: string
- alt: string
- id?: string

Usage

new ImageBuilder('www.example.com/image.png', 'Picture of Ireland');

See also:
- MDN img

decoding( value )

Returns: ImageBuilder<HTMLImageElement>

Arguments
- value: 'sync' | 'async' | 'auto'

Usage

new ImageBuilder('www.example.com/image.png', 'Picture of Ireland').decoding('aysnc'));

sizes( value )

Returns: ImageBuilder<HTMLImageElement>

Arguments
- value: string

Usage

new ImageBuilder('www.example.com/image.png', 'Picture of Ireland').sizes('(max-width: 600px) 200px, 50vw'));

srcset( value )

Returns: ImageBuilder<HTMLImageElement>

Arguments
- value: string

Usage

new ImageBuilder('www.example.com/image.png', 'Picture of Ireland').srcset('/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w'));

ImageInputBuilder extends InputBuilder

This element builder is used to create a graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing.

Documentation

constructor( src, alt, id? )

Returns: ImageInputBuilder<HTMLInputElement>

Arguments
- src: string
- alt: string
- id?: string

Usage

new ImageInputBuilder('www.example.com/image.png', 'Picture of Ireland');

formAction( url )

Returns: ImageInputBuilder<HTMLInputElement>

Arguments
- url: string

Usage

new ImageInputBuilder('www.example.com/image.png', 'Picture of Ireland').formAction('submit.php');

formEnctype( enctype )

Returns: ImageInputBuilder<HTMLInputElement>

Arguments
- enctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Usage

new ImageInputBuilder('www.example.com/image.png', 'Picture of Ireland').formEnctype('application/x-www-form-urlencoded');

formMethod( method )

Returns: ImageInputBuilder<HTMLInputElement>

Arguments
- method: 'get' | 'post' | 'dialog'

Usage

new ImageInputBuilder('www.example.com/image.png', 'Picture of Ireland').formMethod('post');

InputBuilder

This element builder is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent

Documentation

constructor( type?, id? )

Returns: InputBuilder<HTMLInputElement>

Provide input type (i.e., text, sumbit, button, email etc)

Arguments
- type?: string = 'text'
- id?: string
Usage
```
new InputBuilder();
```

autocomplete( value )

Returns: InputBuilder<HTMLInputElement>

Hint for form autofill feature

Arguments
- value: string
Usage
```
new InputBuilder().autocomplete('url');
```
See also:
- MDN input#htmlattrdefautocomplete

autofocus()

Returns: InputBuilder<HTMLInputElement>

Automatically focus the form control when the page is loaded

Usage
```
new InputBuilder().autofocus();
```
See also:
- MDN input#attr-autofocus

datalist( id )

Returns: InputBuilder<HTMLInputElement>

The value given should be the id of a `<datalist>` element located in the same document which provides predefined values to suggest to the user for this input

Arguments
- id: string

Usage

new InputBuilder().datalist('myDataList');

See also:
- MDN Input#htmlattrdeflist

disabled()

Returns: InputBuilder<HTMLInputElement>

Disables the control

Usage
```
new InputBuilder().disabled();
```
See also:
- MDN input#htmlattrdefdisabled
- #DataListBuilder

name( value )

Returns: InputBuilder<HTMLInputElement>

Name of the form control. Submitted with the form as part of a name/value pair

Arguments
- value: string
Usage
```
new InputBuilder().name('email');
```
See also:
- MDN input#htmlattrdefname

onInvalid( value )

Returns: InputBuilder<HTMLInputElement>

Text that will appear under on this form control when it is resolved to invalid. This set's the validity message

Arguments
- value: string

Usage

new InputBuilder().onInvalid('Oops. This input control must contain at least 1 upper and 1 lowercase character');

See also:
- MDN setCustomValidity

placeholder( value )

Returns: InputBuilder<HTMLInputElement>

Text that appears in the form control when it has no value set

Arguments
- value: string

Usage

new InputBuilder().placeholder('Enter value here');

See also:
- MDN input#htmlattrdefplaceholder

readonly()

Returns: InputBuilder<HTMLInputElement>

Specify that the control is readonly

Usage
```
new InputBuilder().readonly();
```
See also:
- MDN readonly

required()

Returns: InputBuilder<HTMLInputElement>

A value is required or must be check for the form to be submittable

Usage
```
new InputBuilder().required();
```
See also:
- MDN required

value( value )

Returns: InputBuilder<HTMLInputElement>

value The initial value of the control

Arguments
- value: string
Usage
```
new InputBuilder().value('foobar');
```

ListBuilder

This element builder is used to create an element with a list of items rendered in list format

Documentation

constructor( isOrdered?, style?, id? )

Returns: ListBuilder<HTMLULListElement>

Identify if the list should be ordered <ol></ol> or unordered

The list-style of the given list

Arguments
- isOrdered?: boolean = false
- style?: string
- id?: string
Usage
```
new ListBuilder();
```

addItem( item )

Returns: ListBuilder<HTMLULListElement>

Arguments
- item: string | ListItemBuilder

Usage

new ListBuilder().addItem('cat')
                 .addItem('dog')
                 .addItem(new ListItemBuilder('horse'));

See also:
- #ListItemBuilder

addItems( items )

Returns: ListBuilder<HTMLULListElement>

Arguments
- items: (string | ListItemBuilder)[]

Usage

new ListBuilder().addItems('cat', 'dog', new ListItemBuilder('horse'));

See also:
- #ListItemBuilder

addSublist( listBuilder )

Returns: ListBuilder<HTMLULListElement>

Add's a sublist list `<ul>` or `<ol>` with proper HTML markup by automatically adding it to a `<li>`. This is semantic HTML as well as proper HTML markup

Arguments
- listBuilder: ListBuilder

Usage

new ListBuilder().addSublist(new ListBuilder().addItems(['cat', 'dog']));

See also:
- MDN ul#nesting_a_list

ListItemBuilder

This element builder is used to create an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter

Documentation

constructor( html )

Returns: ListItemBuilder<HTMLLIElement>

Arguments
- html: string
Usage
```
new ListItemBuilder('cat');
```
See also:
- MDN li

MeterBuilder

This element builder is used to create an element that represents either a scalar value within a known range or a fractional value

Documentation

constructor( id? )

Returns: MeterBuilder<HTMLMeterElement>

Arguments
- id?: string
Usage
```
new MeterBuilder();
```
See also:
- MDN meter

min( value )

Returns: MeterBuilder<HTMLMeterElement>

The lower numeric bound of the measured range. This must be less than the maximum value (max attribute), if specified. If unspecified, the minimum value is 0

Arguments
- value: number
Usage
```
new MeterBuilder().min(5);
```

max( value )

Returns: MeterBuilder<HTMLMeterElement>

The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. If unspecified, the maximum value is 1

Arguments
- value: number
Usage
```
new MeterBuilder().max(10);
```

minmax( min, max )

Returns: MeterBuilder<HTMLMeterElement>

Arguments
- min: number
- max: number
Usage
```
new MeterBuilder().minmax(5, 10);
```

low( value )

Returns: MeterBuilder<HTMLMeterElement>

The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the low value is equal to the minimum value

Arguments
- value: number
Usage
```
new MeterBuilder().low(5);
```

high( value )

Returns: MeterBuilder<HTMLMeterElement>

Arguments
- value: number
Usage
```
new MeterBuilder().high(10);
```

lowhigh( low, high )

Returns: MeterBuilder<HTMLMeterElement>

The lower numeric bound of the high end of the measured range. This must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the high value is equal to the maximum value

Arguments
- low: number
- high: number
Usage
```
new MeterBuilder().lowhigh(5, 10);
```

optimum( value )

Returns: MeterBuilder<HTMLMeterElement>

This attribute indicates the optimal numeric value. It must be within the range (as defined by the min attribute and max attribute). When used with the low attribute and high attribute, it gives an indication where along the range is considered preferable. For example, if it is between the min attribute and the low attribute, then the lower range is considered preferred. The browser may color the meter's bar differently depending on whether the value is less than or equal to the optimum value

Arguments
- value: number
Usage
```
new MeterBuilder().optimum(10);
```

MonthInputBuilder extends DateInputBuilder

This element builder is used to create a control for entering a month and year, with no time zone

Documentation

constructor( value?, id? )

Returns: MonthInputBuilder<HTMLInputElement>

Arguments
- value?: string
- id?: string
Usage
```
new MonthInputBuilder();
```
See also:
- MDN month

NumberInputBuilder extends InputBuilder

This element builder is used to create a control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads

Documentation

constructor( value?, id? )

Returns: NumberInputBuilder<HTMLInputElement>

Arguments
- value?: string
- id?: string
Usage
```
new NumberInputBuilder();
```
See also:
- MDN month

min( value )

Returns: NumberInputBuilder<HTMLInputElement>

The minimum value to accept for this control

Arguments
- value: string

Usage

new NumberInputBuilder().min('2.222222222');

max( value )

Returns: NumberInputBuilder<HTMLInputElement>

The maximum value to accept for this control

Arguments
- value: string
Usage
```
new NumberInputBuilder().max('10.235');
```

step( interval )

Returns: NumberInputBuilder<HTMLInputElement>

A stepping interval to use when using up and down arrows to adjust the value, as well as for validation

Arguments
- interval: string
Usage
```
new NumberInputBuilder().step('10');
```

OptionBuilder

This element builder is used to create an item contained in a `<select>`, an `<optgroup>`, or a `<datalist>` element. As such, `<option>` can represent menu items in popups and other lists of items in an HTML document

Documentation

constructor( content, value?, id? )

Returns: OptionBuilder<HTMLOptionElement>

Arguments
- content: string
- value?: string
- id?: string
Usage
```
new OptionBuilder('Foo', 'foo');
```
See also:
- MDN option

PasswordInputBuilder extends TextInputBuilder

This element builder is used to create a single-line text field whose value is obscured. Will alert user if site is not secure

Documentation

constructor( id? )

Returns: PasswordInputBuilder<HTMLInputElement>

Arguments
- id?: string
Usage
```
new PasswordInputBuilder();
```
See also:
- MDN password

PictureBuilder

This element builder is used to create a `<picture>` element that contains zero or more `<source>` elements and one `<img>` element to offer alternative versions of an image for different display/device scenarios

The browser will consider each child `<source>` element and choose the best match among them. If no matches are found—or the browser doesn't support the `<picture>` element—the URL of the `<img>` element's src attribute is selected. The selected image is then presented in the space occupied by the `<img>` element

Documentation

constructor( imgBuilder, id? )

Returns: PictureBuilder<HTMLPictureElement>

Arguments
- imgBuilder: ImageBuilder
- id?: string
Usage
```
new PictureBuilder();
```
See also:
- MDN picture
- #ImageBuilder

source( ...source )

Returns: PictureBuilder<HTMLPictureElement>

Add an alternate source (`<source>`) tag via SourceBuilders

Arguments
- ...source: SourceBuilder[]

Usage

new PictureBuilder().source(new SourceBuilder('/myimage.png', 'image/png'));

See also:
- MDN picture
- #SourceBuilder

ProgressBuilder

This element builder is used to create an indicator showing the completion progress of a task, typically displayed as a progress bar

Documentation

constructor( value, id? )

Returns: ProgressBuilder<HTMLProgressElement>

Arguments
- value: number
- id?: string
Usage
```
new ProgressBuilder(50);
```
See also:
- MDN progress

max( value )

Returns: ProgressBuilder<HTMLProgressElement>

Arguments
- value: number
Usage
```
new ProgressBuilder(50).max(70);
```

RadioInputBuilder extends InputBuilder

A radio button, allowing a single value to be selected out of multiple choices with the same name value

Documentation

constructor( checked?, id? )

Returns: RadioInputBuilder<HTMLInputElement>

Arguments
- checked?: boolean = false
- id?: string
Usage
```
new RadioInputBuilder();
```
See also:
- MDN radio

RangeInputBuilder extends InputBuilder

This element builder is used to create a control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values

Documentation

constructor( value?, id? )

Returns: RangeInputBuilder<HTMLInputElement>

Arguments
- value?: string
- id?: string
Usage
```
new RangeInputBuilder();
```
See also:
- MDN range

ScriptBuilder

This element builder is used to create an element that is used to embed executable code or data; this is typically used to embed or refer to JavaScript code

Documentation

constructor( id? )

Returns: ScriptBuilder<HTMLScriptElement>

Arguments
- id?: string
Usage
```
new ScriptBuilder();
```
See also:
- MDN script

async()

Returns: ScriptBuilder<HTMLScriptElement>

Usage
```
new ScriptBuilder().async();
```

crossOrigin( value )

Returns: ScriptBuilder<HTMLScriptElement>

Arguments
- value: 'anonymous' | 'use-credentials' | ''
Usage
```
new ScriptBuilder().async();
```

defer()

Returns: ScriptBuilder<HTMLScriptElement>

Usage
```
new ScriptBuilder().defer();
```

integrity( value )

Returns: ScriptBuilder<HTMLScriptElement>

This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation

Arguments
- value: string

Usage

new ScriptBuilder().integrity('sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC');

noModule()

Returns: ScriptBuilder<HTMLScriptElement>

Indicate that the script should not be executed in browsers that support ES2015 modules — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code

Usage
```
new ScriptBuilder().noModule();
```

nonce( value )

Returns: ScriptBuilder<HTMLScriptElement>

A cryptographic nonce (number used once) to whitelist scripts in a script-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial

Arguments
- value: string

Usage

new ScriptBuilder().nonce('12350987123092');

referrerPolicy( value )

Returns: ScriptBuilder<HTMLScriptElement>

Arguments
- value: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'

Usage

new ScriptBuilder().referrerPolicy('origin');

src( value )

Returns: ScriptBuilder<HTMLScriptElement>

Arguments
- value: string

Usage

new ScriptBuilder().src('/js/master.js');

type( value )

Returns: ScriptBuilder<HTMLScriptElement>

Arguments
- value: 'module' | string
Usage
```
new ScriptBuilder().type('module');
```

SearchInputBuilder extends TextInputBuilder

This element builder is used to create a single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads

Documentation

constructor( id? )

Returns: SearchInputBuilder<HTMLInputElement>

Arguments
- id?: string
Usage
```
new SearchInputBuilder();
```
See also:
- MDN search

SelectBuilder

This element builder is used to create an element that represents a control that provides a menu of options

Documentation

constructor( instructionMessage?, id? )

Returns: SelectBuilder<HTMLSelectElement>

Instruction message, if provided, will be the first option in the element that is usually used as a placeholder. It is automatically given an attribute `value` of `""` and disabled for selection

Arguments
- instructionMessage?: string
- id?: string
Usage
```
new SelectBuilder();
```
See also:
- MDN select

addOptionGroup( label, ...option )

Returns: SelectBuilder<HTMLSelectElement>

Create an `<optgroup>` container with provided options

Arguments
- label: string
- ...option: OptionBuilder[]

Usage

new SelectBuilder().addOptionGroup('Types of Pets', new OptionBuilder('cat'), new OptionsBuilder('dog'));

See also:
- #OptionBuilder

addOption( content, value, classes )

Returns: SelectBuilder<HTMLSelectElement>

Arguments
- content: string
- value: string
- classes: string[]

Usage

new SelectBuilder().addOption('Big cat', 'cat');

addOptions( options )

Returns: SelectBuilder<HTMLSelectElement>

Arguments
- options: (string | OptionBuilder)[]

Usage

new SelectBuilder().addOptions('dog', new OptionBuilder('Big cat', 'cat'));

See also:
- #OptionBuilder

autocomplete( value )

Returns: SelectBuilder<HTMLSelectElement>

Hint for form autofill feature

Arguments
- value: string

Usage

new SelectBuilder().autocomplete('url');

See also:
- MDN input#htmlattrdefautocomplete

autofocus()

Returns: SelectBuilder<HTMLSelectElement>

Automatically focus the form control when the page is loaded

Usage
```
new SelectBuilder().autofocus();
```
See also:
- MDN input#attr-autofocus

disabled()

Returns: SelectBuilder<HTMLSelectElement>

Disables the control

Usage
```
new SelectBuilder().disabled();
```
See also:
- MDN input#htmlattrdefdisabled
- #DataListBuilder

multiple()

Returns: SelectBuilder<HTMLSelectElement>

Indicates that multiple options can be selected in the list

Usage
```
new SelectBuilder().multiple();
```
See also:
- MDN input#htmlattrdefdisabled
- #DataListBuilder

name( value )

Returns: SelectBuilder<HTMLSelectElement>

Name of the form control. Submitted with the form as part of a name/value pair

Arguments
- value: string
Usage
```
new SelectBuilder().name('email');
```
See also:
- MDN input#htmlattrdefname

onInvalid( value )

Returns: SelectBuilder<HTMLSelectElement>

Text that will appear under on this form control when it is resolved to invalid. This set's the validity message

Arguments
- value: string

Usage

new SelectBuilder().onInvalid('Oops. This input control must contain at least 1 upper and 1 lowercase character');

See also:
- MDN setCustomValidity

required()

Returns: SelectBuilder<HTMLSelectElement>

A value is required or must be check for the form to be submittable

Usage
```
new SelectBuilder().required();
```
See also:
- MDN required

size( value )

Returns: SelectBuilder<HTMLSelectElement>

If the control is presented as a scrolling list box (multiple) this attribute indicates how many rows should be displayed at a time

Arguments
- value: number
Usage
```
new SelectBuilder().size(10);
```

SlotBuilder

This element builder is used to create an element - part of the Web Components technology suite - that is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together

Documentation

constructor( name, content, id? )

Returns: SlotBuilder<HTMLSlotElement>

Arguments
- name: string
- content: html | TagBuilder
- id?: string

Usage

new SlotBuilder('todo', '<ul><li>Do x</li><li>Do y</li></ul>);

See also:
- MDN slot

SourceBuilder

This element builder is used to create an element that specifies multiple media resources for the `<picture>`, the `<audio>` element, or the `<video>` element. It is an empty element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats

Documentation

constructor( src, type, id? )

Returns: SourceBuilder<HTMLSourceElement>

Arguments
- src: string
- type: string
- id?: string

Usage

new SourceBuilder('www.example.com/video.mp4', 'video/mp4');

media( value )

Returns: SourceBuilder<HTMLSourceElement>

Media query of the resource's intended media; this should be used only in a `<picture>` element

Arguments
- value: string

sizes( value )

Returns: SourceBuilder<HTMLSourceElement>

Arguments
- value: string

Usage

new SourceBuilder('www.example.com/video.mp4', 'video/mp4').sizes('(max-width: 600px) 200px, 50vw'));

srcset( value )

Returns: SourceBuilder<HTMLSourceElement>

Arguments
- value: string

Usage

new SourceBuilder('www.example.com/video.mp4', 'video/mp4').srcset('/files/16864/demo-200px.mp4 200w, /files/16797/demo-400px.mp4 400w'));

SpanBuilder

This element builder is used to create a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. `<span>` is very much like a <div> element, but `<div>` is a block-level element whereas a `<span>` is an inline element

Documentation

constructor( style? )

Returns: SpanBuilder<HTMLSpanElement>

Arguments
- style?: ('bold' | 'bolder' | 'lighter' | 'italic' | 'underline' | 'strikethrough')[], id?: string

Usage

new SpanBuilder(['bold', 'italic', 'underline']);

See also:
- MDN span

bold()

Returns: SpanBuilder<HTMLSpanElement>

Usage
```
new SpanBuilder().bold();
```

bolder()

Returns: SpanBuilder<HTMLSpanElement>

Usage
```
new SpanBuilder().bolder();
```

italic()

Returns: SpanBuilder<HTMLSpanElement>

Usage
```
new SpanBuilder().italic();
```

lighter()

Returns: SpanBuilder<HTMLSpanElement>

Usage
```
new SpanBuilder().lighter();
```

underline()

Returns: SpanBuilder<HTMLSpanElement>

Usage
```
new SpanBuilder().underline();
```

strikethrough()

Returns: SpanBuilder<HTMLSpanElement>

Usage
```
new SpanBuilder().strikethrough();
```

color( value )

Returns: SpanBuilder<HTMLSpanElement>

Arguments
- value: string
Usage
```
new SpanBuilder().color('red');
```

TableBuilder

This element builder is used to create tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data

Documentation

constructor( caption?, id? )

Returns: TableBuilder<HTMLTableElement>

Arguments
- caption?: string
- id?: string
Usage
```
new TableBuilder();
```
See also:
- MDN table

addHeader( ...th )

Returns: TableBuilder<HTMLTableElement>

Arguments
- ...th: string[]

Usage

new TableBuilder().addHeader('Date', 'Name', 'Age');

addRow( ...td )

Returns: TableBuilder<HTMLTableElement>

HTML or text values that will be rendered as `<td>` content, automatically added to a `<tr>`

Arguments
- ...td: string[]

Usage

new TableBuilder().addRow('2017-08-20', 'John', '30');

colgroup( builder )

Returns: TableBuilder<HTMLTableElement>

Arguments
- builder: ColGroupBuilder

Usage

new TableBuilder().colgroup(new ColGroupBuilder());

See also:
- #ColGroupBuilder

collapse()

Returns: TableBuilder<HTMLTableElement>

Specify that the table should use `border-collapse: collapse`

Usage
```
new TableBuilder().collapse();
```

setHeaders( ...header )

Returns: TableBuilder<HTMLTableElement>

Arguments
- ...header: string[]

Usage

new TableBuilder().setHeaders('Date', 'Name', 'Age');

setRows( ...row )

Returns: TableBuilder<HTMLTableElement>

Arguments
- ...row: string[][]

Usage

new TableBuilder().setRows(['A1', 'A2', 'A3'], ['B1', 'B2', 'B3']);

TelInputBuilder extends TextInputBuilder

This element builder is used to create a control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads

Documentation

constructor( id? )

Returns: TelInputBuilder<HTMLInputElement>

Arguments
- id?: string
Usage
```
new TelInputBuilder();
```
See also:
- MDN tel

TemplateBuilder

This element builder is used to create a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however

Documentation

constructor( id )

Returns: TemplateBuilder<HTMLInputElement>

Arguments
- id: string
Usage
```
new TemplateBuilder();
```
See also:
- MDN template

addStylesToRoot( cssText )

Returns: TemplateBuilder<HTMLInputElement>

Arguments
- cssText: string

Usage

new TemplateBuilder().addStylesToRoot(`div {
    background-color: red;
}
a, a::before {
    content : "#";
}`);

addSlots( ...slot )

Returns: TemplateBuilder<HTMLInputElement>

Arguments
- ...slot: SlotBuilder[]

Usage

new TemplateBuilder().addSlots(new SlotBuilder('description', 'foobar'));

See also:
- #SlotBuilder

TextAreaBuilder

This element builder is used to create an element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form

Documentation

constructor( rows?, cols?, id? )

Returns: TextAreaBuilder<HTMLTextAreaElement>

Arguments
- rows?: number
- cols?: number
- id?: string
Usage
```
new TextAreaBuilder();
```
See also:
- MDN textarea

autocomplete( value )

Returns: TextAreaBuilder<HTMLTextAreaElement>

Hint for form autofill feature

Arguments
- value: string

Usage

new TextAreaBuilder().autocomplete('url');

See also:
- MDN input#htmlattrdefautocomplete

autofocus()

Returns: TextAreaBuilder<HTMLTextAreaElement>

Automatically focus the form control when the page is loaded

Usage
```
new TextAreaBuilder().autofocus();
```
See also:
- MDN input#attr-autofocus

disabled()

Returns: TextAreaBuilder<HTMLTextAreaElement>

Disables the control

Usage
```
new TextAreaBuilder().disabled();
```
See also:
- MDN input#htmlattrdefdisabled
- #DataListBuilder

maxLength()

Returns: TextAreaBuilder<HTMLTextAreaElement>

The maximum number of characters (UTF-16 code units) required that the user should enter

Usage
```
new TextAreaBuilder().maxLength(250);
```

minLength()

Returns: TextAreaBuilder<HTMLTextAreaElement>

The minimum number of characters (UTF-16 code units) required that the user should enter

Usage
```
new TextAreaBuilder().minLength(1);
```

name( value )

Returns: TextAreaBuilder<HTMLTextAreaElement>

Name of the form control. Submitted with the form as part of a name/value pair

Arguments
- value: string
Usage
```
new TextAreaBuilder().name('email');
```
See also:
- MDN input#htmlattrdefname

onInvalid( value )

Returns: TextAreaBuilder<HTMLTextAreaElement>

Text that will appear under on this form control when it is resolved to invalid. This set's the validity message

Arguments
- value: string

Usage

new TextAreaBuilder().onInvalid('Oops. This input control must contain at least 1 upper and 1 lowercase character');

See also:
- MDN setCustomValidity

placeholder( value )

Returns: TextAreaBuilder<HTMLTextAreaElement>

Text that appears in the form control when it has no value set

Arguments
- value: string

Usage

new TextAreaBuilder().placeholder('Enter value here');

See also:
- MDN input#htmlattrdefplaceholder

readonly()

Returns: TextAreaBuilder<HTMLTextAreaElement>

Specify that the control is readonly

Usage
```
new TextAreaBuilder().readonly();
```
See also:
- MDN readonly

required()

Returns: TextAreaBuilder<HTMLTextAreaElement>

A value is required or must be check for the form to be submittable

Usage
```
new TextAreaBuilder().required();
```
See also:
- MDN required

value( value )

Returns: TextAreaBuilder<HTMLTextAreaElement>

value The initial value of the control

Arguments
- value: string
Usage
```
new TextAreaBuilder().value('foobar');
```

wrap( value )

Returns: TextAreaBuilder<HTMLTextAreaElement>

Indicates how the control wraps text

Arguments
- value: 'hard' | 'soft'
Usage
```
new TextAreaBuilder().wrap('foobar');
```

TextInputBuilder extends InputBuilder

This element builder is used to create a single-line text field. Line-breaks are automatically removed from the input value

Documentation

constructor( id? )

Returns: TextInputBuilder<HTMLInputElement>

Arguments
- id?: string
Usage
```
new TextInputBuilder();
```
See also:
- MDN text

maxLength( value )

Returns: TextInputBuilder<HTMLInputElement>

The maximum number of characters the input should accept

Arguments
- value: number
Usage
```
new TextInputBuilder().maxLength(50);
```

minLength( value )

Returns: TextInputBuilder<HTMLInputElement>

The minimum number of characters the input should accept

Arguments
- value: number
Usage
```
new TextInputBuilder().minLength(10);
```

pattern( value )

Returns: TextInputBuilder<HTMLInputElement>

Arguments
- value: RegExp | string

Usage

new TextInputBuilder().pattern(/[\w]+/);

size( value )

Returns: TextInputBuilder<HTMLInputElement>

Arguments
- value: number
Usage
```
new TextInputBuilder().size(100);
```

TimeInputBuilder extends DateInputBuilder

This element builder is used to create a control for entering a time value with no time zone

Documentation

constructor( value?, id? )

Returns: TimeInputBuilder<HTMLInputElement>

Arguments
- value?: string
- id?: string
Usage
```
new TimeInputBuilder();
```
See also:
- MDN time

UrlInputBuilder extends TextInputBuilder

This element builder is used to create a field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards

Documentation

constructor( id? )

Returns: UrlInputBuilder<HTMLInputElement>

Arguments
- id?: string
Usage
```
new UrlInputBuilder();
```
See also:
- MDN url

VideoBuilder

This element builder is used to create an element (`<video>`) that embeds a media player which supports video playback into the document

Documentation

constructor( src, type, id? )

Returns: VideoBuilder<HTMLVideoElement>

Arguments
- src: string
- type: string
- id?: string

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4');

See also:
- MDN video

addFallbackSrc( src, type )

Returns: VideoBuilder<HTMLVideoElement>

Add a source for browsers that don't support main src

Provide url and mimetype of url content

Arguments
- src: string
- type: string

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4').addFallbackSrc('www.example.com/video.ogg', 'video/ogg');

loop()

Returns: VideoBuilder<HTMLVideoElement>

The audio player will automatically seek back to the start upon reaching the end of the audio

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4').loop();

muted()

Returns: VideoBuilder<HTMLVideoElement>

Mutes the element

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4').muted();

noControls()

Returns: VideoBuilder<HTMLVideoElement>

Indicates that the browser will not offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4').noControls();

onNotSupported( html )

Returns: VideoBuilder<HTMLVideoElement>

HTML or text to be displayed for browsers that do not support this element

Arguments
- html: string

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4').onNotSupported('<div>Not supported in this browser</div>');

poster( url )

Returns: VideoBuilder<HTMLVideoElement>

A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame

Arguments
- url: string

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4').preload('auto');

preload( value )

Returns: VideoBuilder<HTMLVideoElement>

Provide a hint to the browser about what the author thinks will lead to the best user experience

Arguments
- value: 'none' | 'metadata' | 'auto' = 'auto'

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4').preload('auto');

See also:
- MDN track

track( src, kind, isDefault?, srclang?, label? )

Returns: VideoBuilder<HTMLVideoElement>

Specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks

Arguments
- src: string
- kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata'
- isDefault?: boolean
- srclang?: string
- label?: string

Usage

new VideoBuilder('www.example.com/video.mp4', 'video/mp4').track('/media/examples/source.vtt', 'captions', true, 'en');

WeekInputBuilder extends DateInputBuilder

This element builder is used to create a control for entering a date consisting of a week-year number and a week number with no time zone

Documentation

constructor( value?, id? )

Returns: WeekInputBuilder<HTMLInputElement>

Arguments
- value?: string
- id?: string
Usage
```
new WeekInputBuilder();
```
See also:
- MDN week

SVGBuilder

This element builder is used to create XML-based markup language for describing two-dimensional based vector graphics

Documentation

constructor( viewBox?, id?, xmlns? )

Returns: SVGBuilder

Arguments
- viewBox?: string
- id?: string
- xmlns?: string
Usage
```
new SVGBuilder('0 0 500 500', 'mySVG');
```
See also:
- MDN SVG

attr( key, value )

Returns: SVGBuilder<SVGElement>

Alias for element.setAttribute()

Arguments
- key: string
- value: any

Usage

new SVGBuilder('0 0 500 500', 'mySVG').attr('data-scroll', true);

slot( value )

Returns: SVGBuilder<SVGElement>

Arguments
- value: string

Usage

new SVGBuilder('0 0 500 500', 'mySVG').slot('description');

See also:
- MDN slot

tabindex( index )

Returns: SVGBuilder<SVGElement>

An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position

Arguments
- index: number

Usage

new SVGBuilder('0 0 500 500', 'mySVG').tabindex('-1');

See also:
- MDN tabindex

append( child )

Returns: SVGBuilder<SVGElement>

Inserts a set of tag builder objects or DOMString objects after the last child of the Element. DOMString objects are inserted as equivalent Text nodes

Arguments
- child: ...(html | SVGBuilder)[]

Usage

//example using plain text
new SVGBuilder('0 0 500 500', 'mySVG').append('foobar foobaz foodad');

//example using a tag builder object
new SVGBuilder('0 0 500 500', 'mySVG').append(new SVGBuilder('0 0 500 500', 'mySVG').innerHTML('foobar'));

//data types can be used in tandem:
new SVGBuilder('0 0 500 500', 'mySVG').append('foobar', new SVGBuilder('0 0 500 500', 'mySVG').innerHTML('foodad'));

See also:
- MDN append

prepend( child )

Returns: SVGBuilder<SVGElement>

Inserts a set of tag builder objects or DOMString objects before the first child of the Element. DOMString objects are inserted as equivalent Text nodes

Arguments
- child: ...(html | SVGBuilder)[]

Usage

//example using plain text
new SVGBuilder('0 0 500 500', 'mySVG').prepend('foobar foobaz foodad');

//example using a tag builder object
new SVGBuilder('0 0 500 500', 'mySVG').prepend(new SVGBuilder('0 0 500 500', 'mySVG').innerHTML('foobar'));

//data types can be used in tandem:
new SVGBuilder('0 0 500 500', 'mySVG').prepend('foobar', new SVGBuilder('0 0 500 500', 'mySVG').innerHTML('foodad'));

See also:
- MDN prepend

insertAdjacent( sibling, placement )

Returns: SVGBuilder<SVGElement>

Insert a sibling adjacent to the owning element. This is only guaranteed to work in `headless` mode

Arguments
- sibling: SVGBuilder
- placement: 'after' | 'before' = 'after'

Usage

new SVGBuilder('0 0 500 500', 'mySVG').insertAdjacent(new SVGBuilder('0 0 500 500', 'mySVG') 'before');

innerHTML( html )

Returns: SVGBuilder<SVGElement>

Arguments
- html: string

Usage

new SVGBuilder('0 0 500 500', 'mySVG').innerHTML('foobar');

See also:
- MDN innerHTML

bounds( width, height )

Returns: SVGBuilder<SVGElement>

Set the width and height css properties of the element using CSS values

Arguments
- width: string
- height: string

Usage

new SVGBuilder('0 0 500 500', 'mySVG').bounds('100px', '50%');

classes( ...aClass )

Returns: SVGBuilder<SVGElement>

Add classes to the element

Arguments
- ...aClass: string[]

Usage

new SVGBuilder('0 0 500 500', 'mySVG').classes('foo', 'bar', 'baz', 'dad');

height( height )

Returns: SVGBuilder<SVGElement>

Set the height of the element

Arguments
- height: string

Usage

new SVGBuilder('0 0 500 500', 'mySVG').height('100px');

margin( ...cssShorthand )

Returns: SVGBuilder<SVGElement>

CSS margin short-hand equivalent rest parameters. This behaves exactly like you would use in CSS files

Arguments
- ...cssShorthand: string[]

Usage

//apply to all sides:
new SVGBuilder('0 0 500 500', 'mySVG').margin('5px'); //CSS equivalent = margin: 5px;

//apply to vertical | horizontal
new SVGBuilder('0 0 500 500', 'mySVG').margin('5px', '10px'); //CSS equivalent = margin: 5px 10px;

//apply to top | horizontal | bottom
new SVGBuilder('0 0 500 500', 'mySVG').margin('5px', '10px', '8px'); //CSS equivalent = margin: 5px 10px 8px;

//apply to top | right | bottom | left
new SVGBuilder('0 0 500 500', 'mySVG').margin('5px', '6px', '7px', '8px'); //CSS equivalent = margin: 5px 6px 7px 8px;

See also:
- MDN margin

origin( top?, right?, bottom?, left? )

Returns: SVGBuilder<SVGElement>

Set position properties using CSS values. If the argmuents are null or undefined they will be ignored

Arguments
- top?: string
- right?: string
- bottom?: string
- left?: string

Usage

//setting the left property ignoring the rest
new SVGBuilder('0 0 500 500', 'mySVG').origin(null, null, null, '-10px'); //CSS equivalent = left: -10px;

padding( ...cssShorthand )

Returns: SVGBuilder<SVGElement>

CSS padding short-hand equivalent rest parameters. This behaves exactly like you would use in CSS files

Arguments
- ...cssShorthand: string[]

Usage

//apply to all sides:
new SVGBuilder('0 0 500 500', 'mySVG').padding('5px'); //CSS equivalent = padding: 5px;

//apply to vertical | horizontal
new SVGBuilder('0 0 500 500', 'mySVG').padding('5px', '10px'); //CSS equivalent = padding: 5px 10px;

//apply to top | horizontal | bottom
new SVGBuilder('0 0 500 500', 'mySVG').padding('5px', '10px', '8px'); //CSS equivalent = padding: 5px 10px 8px;

//apply to top | right | bottom | left
new SVGBuilder('0 0 500 500', 'mySVG').padding('5px', '6px', '7px', '8px'); //CSS equivalent = padding: 5px 6px 7px 8px;

See also:
- MDN padding

position( value )

Returns: SVGBuilder<SVGElement>

Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements

Arguments
- value: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky'

Usage

new SVGBuilder('0 0 500 500', 'mySVG').position('relative');

See also:
- MDN position

style( obj )

Returns: SVGBuilder<SVGElement>

CSS property-value pairs. Each property/value pair you provide is validated against using the users agents native window.CSS.supports()method. Anything that is not supported will be ignored

Notice how the usage example demonstrates the names of the CSS properties are not the javascript camelcase variants, they are the CSS property names as-is

Arguments
- obj: { [key: string]: string | number | boolean }

Usage

new SVGBuilder('0 0 500 500', 'mySVG').style({
    'padding-left': '20px',
    position: 'relative',
    color: 'red',
    'border-top-left-radius' : '2.5em'
});

width( width )

Returns: SVGBuilder<SVGElement>

Set the width of the element

Arguments
- width: string

Usage

new SVGBuilder('0 0 500 500', 'mySVG').width('100px');

on( event, listener )

Returns: SVGBuilder<SVGElement>

Sets up a function that will be called whenever the specified event is delivered to the target

Arguments
- event: keyof GlobalEventHandlersEventMap
- listener: (this: SVGElement, env: Event)

Usage

new SVGBuilder('0 0 500 500', 'mySVG').on('click', () => alert('Hello World'));

See also:
- MDN addEventListener

clone()

Returns: SVGBuilder<SVGElement>

Clone the current tag builder. This deep clones the node it respectively manages

Note: this uses the same HTMLElement.cloneNode() method native to browsers, therefor, things like id's and individual configurations for a given node will be duplicated as-is

Usage

new SVGBuilder('0 0 500 500', 'mySVG').clone();

build()

Returns: SVGElement

The node the current builder manages as an SVGElement

Usage

new SVGBuilder('0 0 500 500', 'mySVG').build();

buildHTML()

Returns: SVGElement

This is the required build method when in `headless` mode. It returns the outerHTML of an SVGElement when in `document` mode, otherwise the HTML markup when in `headless` mode

Usage

new SVGBuilder('0 0 500 500', 'mySVG').buildHTML();

SVGElementBuilder

This element builder is used to create any kind of SVG element, or SVG animation

Documentation

constructor( element, xmlns?, id? )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- element: string
- xmlns?: string
- id?: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG')

See also:
- MDN Element

attr( key, value )

Returns: SVGElementBuilder<T extends SVGElement>

Alias for element.setAttribute()

Arguments
- key: string
- value: any

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').attr('data-scroll', true);

slot( value )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- value: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').slot('description');

See also:
- MDN slot

tabindex( index )

Returns: SVGElementBuilder<T extends SVGElement>

An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position

Arguments
- index: number

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').tabindex('-1');

See also:
- MDN tabindex

append( child )

Returns: SVGElementBuilder<T extends SVGElement>

Inserts a set of tag builder objects or DOMString objects after the last child of the Element. DOMString objects are inserted as equivalent Text nodes

Arguments
- child: ...(html | SVGElementBuilder)[]

Usage

//example using plain text
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').append('foobar foobaz foodad');

//example using a tag builder object
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').append(new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').innerHTML('foobar'));

//data types can be used in tandem:
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').append('foobar', new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').innerHTML('foodad'));

See also:
- MDN append

prepend( child )

Returns: SVGElementBuilder<T extends SVGElement>

Inserts a set of tag builder objects or DOMString objects before the first child of the Element. DOMString objects are inserted as equivalent Text nodes

Arguments
- child: ...(html | SVGElementBuilder)[]

Usage

//example using plain text
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').prepend('foobar foobaz foodad');

//example using a tag builder object
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').prepend(new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').innerHTML('foobar'));

//data types can be used in tandem:
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').prepend('foobar', new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').innerHTML('foodad'));

See also:
- MDN prepend

insertAdjacent( sibling, placement )

Returns: SVGElementBuilder<T extends SVGElement>

Insert a sibling adjacent to the owning element. This is only guaranteed to work in `headless` mode

Arguments
- sibling: SVGElementBuilder
- placement: 'after' | 'before' = 'after'

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').insertAdjacent(new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG') 'before');

innerHTML( html )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- html: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').innerHTML('foobar');

See also:
- MDN innerHTML

bounds( width, height )

Returns: SVGElementBuilder<T extends SVGElement>

Set the width and height css properties of the element using CSS values

Arguments
- width: string
- height: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').bounds('100px', '50%');

classes( ...aClass )

Returns: SVGElementBuilder<T extends SVGElement>

Add classes to the element

Arguments
- ...aClass: string[]

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').classes('foo', 'bar', 'baz', 'dad');

height( height )

Returns: SVGElementBuilder<T extends SVGElement>

Set the height of the element

Arguments
- height: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').height('100px');

margin( ...cssShorthand )

Returns: SVGElementBuilder<T extends SVGElement>

CSS margin short-hand equivalent rest parameters. This behaves exactly like you would use in CSS files

Arguments
- ...cssShorthand: string[]

Usage

//apply to all sides:
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').margin('5px'); //CSS equivalent = margin: 5px;

//apply to vertical | horizontal
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').margin('5px', '10px'); //CSS equivalent = margin: 5px 10px;

//apply to top | horizontal | bottom
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').margin('5px', '10px', '8px'); //CSS equivalent = margin: 5px 10px 8px;

//apply to top | right | bottom | left
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').margin('5px', '6px', '7px', '8px'); //CSS equivalent = margin: 5px 6px 7px 8px;

See also:
- MDN margin

origin( top?, right?, bottom?, left? )

Returns: SVGElementBuilder<T extends SVGElement>

Set position properties using CSS values. If the argmuents are null or undefined they will be ignored

Arguments
- top?: string
- right?: string
- bottom?: string
- left?: string

Usage

//setting the left property ignoring the rest
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').origin(null, null, null, '-10px'); //CSS equivalent = left: -10px;

padding( ...cssShorthand )

Returns: SVGElementBuilder<T extends SVGElement>

CSS padding short-hand equivalent rest parameters. This behaves exactly like you would use in CSS files

Arguments
- ...cssShorthand: string[]

Usage

//apply to all sides:
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').padding('5px'); //CSS equivalent = padding: 5px;

//apply to vertical | horizontal
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').padding('5px', '10px'); //CSS equivalent = padding: 5px 10px;

//apply to top | horizontal | bottom
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').padding('5px', '10px', '8px'); //CSS equivalent = padding: 5px 10px 8px;

//apply to top | right | bottom | left
new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').padding('5px', '6px', '7px', '8px'); //CSS equivalent = padding: 5px 6px 7px 8px;

See also:
- MDN padding

position( value )

Returns: SVGElementBuilder<T extends SVGElement>

Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements

Arguments
- value: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky'

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').position('relative');

See also:
- MDN position

style( obj )

Returns: SVGElementBuilder<T extends SVGElement>

CSS property-value pairs. Each property/value pair you provide is validated against using the users agents native window.CSS.supports()method. Anything that is not supported will be ignored

Notice how the usage example demonstrates the names of the CSS properties are not the javascript camelcase variants, they are the CSS property names as-is

Arguments
- obj: { [key: string]: string | number | boolean }

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').style({
    'padding-left': '20px',
    position: 'relative',
    color: 'red',
    'border-top-left-radius' : '2.5em'
});

width( width )

Returns: SVGElementBuilder<T extends SVGElement>

Set the width of the element

Arguments
- width: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').width('100px');

on( event, listener )

Returns: SVGElementBuilder<T extends SVGElement>

Sets up a function that will be called whenever the specified event is delivered to the target

Arguments
- event: keyof GlobalEventHandlersEventMap
- listener: (this: T extends SVGElement, env: Event)

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').on('click', () => alert('Hello World'));

See also:
- MDN addEventListener

clone()

Returns: SVGElementBuilder<T extends SVGElement>

Clone the current tag builder. This deep clones the node it respectively manages

Note: this uses the same HTMLElement.cloneNode() method native to browsers, therefor, things like id's and individual configurations for a given node will be duplicated as-is

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').clone();

build()

Returns: T extends SVGElement

The node the current builder manages as an T extends SVGElement

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').build();

buildHTML()

Returns: SVGElement

This is the required build method when in `headless` mode. It returns the outerHTML of an T extends SVGElement when in `document` mode, otherwise the HTML markup when in `headless` mode

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').buildHTML();

fill( value )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- value: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').fill('rgba(0,0,0,0.5)');

stroke( stroke, width )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- stroke: string
- width: string | number

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').stroke('rgba(0,0,0,0.5)', 2);

preserveAspectRatio( value )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- value: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').preserveAspectRatio('xMidYMid meet');

x( value )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- value: string | number

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').x(25);

y( value )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- value: string | number

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').y(25);

viewBox( viewBox )

Returns: SVGElementBuilder<T extends SVGElement>

Arguments
- viewBox: string

Usage

new SVGElementBuilder<SVGCircleElement>('circle', 'myCircleSVG').viewBox('0 0 500 500');