Prototype

We’re registering several prototype functions.

HTMLElement.appendChildren

appendChildren(children)

Append multiple child nodes to an element.

Arguments:

• children (Array) – The child nodes

HTMLElement.getChildNodes

getChildNodes()

Get all child nodes of a HTML element.

There’s already a children property on the HTMLElement instance. However, this property will only return the child HTML elements, but not the child nodes. This means that text or comment nodes are missing, thus this function.

Returns:

The child elements

HTMLElement.hasAttributesStartingWith

hasAttributesStartingWith(name)

Checks if there are attributes that start with a certain name.

Arguments:

• name (String) – The name

Returns:

Boolean – Flag if there are matching attributes

HTMLElement.replaceTagName

replaceTagName(tagName)

Replace the tag name of the element.

The function will create a new element and will not update the current element in place. This is because we’re using the outerHTML attribute, which cannot be modified in case an element has no parent node.

Please take the following examples:

<ul></ul>

<ul>
    <li>Hello World</li>
</ul>

<ul data-example="Hello">
    <li>Hello World</li>
</ul>

If you run ulElement.replaceTagName(`ol), you’ll end up with this:

<ol></ol>

<ol>
    <li>Hello World</li>
</ol>

<ol data-example="Hello">
    <li>Hello World</li>
</ol>

Arguments:

• tagName (String) – The new tag name

Returns:

HTMLElement – The new HTML element

String.interpolate

interpolate(The)

Interpolate a string with the new ES6 template syntax.

Arguments:

• The (Object) – interpolate parameters (key-value pairs)

Returns:

String – The interpolated string