103 lines
4.1 KiB
JavaScript
103 lines
4.1 KiB
JavaScript
/**
|
|
* Creates an element with the specified namespace URI, qualified name,
|
|
* attributes and children.
|
|
*
|
|
* @param String ns The namespace URI to use.
|
|
* @param String tagName A string that specifies the type of element
|
|
* to be created.
|
|
* @param Object attributes An object containing key-value mappings for
|
|
* attributes to be set on the newly
|
|
* created element.
|
|
* @param Array children An array containing child elements and/or
|
|
* strings. Any strings will be inserted as text
|
|
* nodes into the newly created element. Children
|
|
* will be appended in array order.
|
|
*/
|
|
|
|
function createElementNS(ns, tagName, attributes={}, children=[]) {
|
|
const elem = document.createElementNS(ns, tagName);
|
|
Object.entries(attributes).forEach(([key, value]) => {
|
|
elem.setAttribute(key, value);
|
|
});
|
|
if(children) {
|
|
for(let i=0; i<children.length; ++i) {
|
|
let child = children[i];
|
|
if(typeof child === "string") {
|
|
child = document.createTextNode(child);
|
|
}
|
|
elem.appendChild(child);
|
|
}
|
|
}
|
|
return elem;
|
|
}
|
|
|
|
/**
|
|
* Creates an HTML element with the specified tag name,
|
|
* attributes and children.
|
|
*
|
|
* @param String tagName A string that specifies the tag name of the
|
|
* element to be created.
|
|
* @param Object attributes An object containing key-value mappings for
|
|
* attributes to be set on the newly
|
|
* created element.
|
|
* @param Array children An array containing child elements and/or
|
|
* strings. Any strings will be inserted as text
|
|
* nodes into the newly created element. Children
|
|
* will be appended in array order.
|
|
*/
|
|
|
|
export function createElement(tagName, attributes={}, children=[]) {
|
|
return createElementNS('http://www.w3.org/1999/xhtml',
|
|
tagName,
|
|
attributes,
|
|
children);
|
|
}
|
|
|
|
/**
|
|
* Creates an SVG element with the specified tag name,
|
|
* attributes and children.
|
|
*
|
|
* @param String tagName A string that specifies the tag name of the
|
|
* element to be created.
|
|
* @param Object attributes An object containing key-value mappings for
|
|
* attributes to be set on the newly
|
|
* created element.
|
|
* @param Array children An array containing child elements and/or
|
|
* strings. Any strings will be inserted as text
|
|
* nodes into the newly created element. Children
|
|
* will be appended in array order.
|
|
*/
|
|
|
|
export function createSVGElement(tagName, attributes={}, children=[]) {
|
|
return createElementNS('http://www.w3.org/2000/svg',
|
|
tagName,
|
|
attributes,
|
|
children);
|
|
}
|
|
|
|
/**
|
|
* Appends a newly created HTML element with the specified tag name,
|
|
* attributes and children to the element on which the function is called.
|
|
*
|
|
* @param String tagName A string that specifies the tag name of the
|
|
* element to be created.
|
|
* @param Object attributes An object containing key-value mappings for
|
|
* attributes to be set on the newly
|
|
* created element.
|
|
* @param Array children An array containing child elements and/or
|
|
* strings. Any strings will be inserted as text
|
|
* nodes into the newly created element. Children
|
|
* will be appended in array order.
|
|
*/
|
|
|
|
function createChild(tagName, attributes={}, children=[]) {
|
|
const elem = createElement(tagName, attributes, children);
|
|
this.appendChild(elem);
|
|
return elem;
|
|
}
|
|
|
|
// Monkey-patch createChild onto the HTMLElement prototype
|
|
if(typeof HTMLElement.prototype.createChild === 'undefined') {
|
|
HTMLElement.prototype.createChild = createChild;
|
|
}
|