UI-js

UI-js is a JavaScript library providing a function for creating DOM elements. It can be used as a tool for building user interface in scripts.

Importing
To import the script through your own script, use: The script's function won't be immediately available, but it will call a hook through. To ensure the builder function exists, you can use:

Function
UI-js exposes a single function used for creating DOM elements. It accepts a single parameter, an object with the following possible properties:


 * Type of the element. For example, if you want to make a div element, it should be set to.
 * If not set, it will create a document fragment.
 * If not set, it will create a document fragment.


 * Text content of the element.
 * Text content of the element.


 * Inner HTML of the element.
 * Should only be used in cases when HTML is not easily convertible to objects recognized by the script (for example, if HTML is downloaded from another source), otherwise, use script's functionality to generate needed DOM nodes.
 * Should only be used in cases when HTML is not easily convertible to objects recognized by the script (for example, if HTML is downloaded from another source), otherwise, use script's functionality to generate needed DOM nodes.


 * Object containing all attributes of the element and their values.
 * Object containing all attributes of the element and their values.


 * Object containing all data attributes of the element.
 * Technically the same as  option but every attribute is prefixed with
 * Technically the same as  option but every attribute is prefixed with


 * Object with CSS properties of the element.
 * This option isn't always working in the current version. Please submit bug reports for cases where this parameter doesn't work.
 * This option isn't always working in the current version. Please submit bug reports for cases where this parameter doesn't work.


 * Object with all event listeners.
 * Keys of this object are event names, values are functions used for handling these events.
 * Keys of this object are event names, values are functions used for handling these events.


 * Used for to determine if a checkbox is checked.
 * If the element isn't a checkbox, setting this parameter does nothing.
 * If the element isn't a checkbox, setting this parameter does nothing.


 * Array of objects that represent configurations for child elements of the current element.
 * Any valid value that can be passed to the library function is a valid element of this array.
 * Any valid value that can be passed to the library function is a valid element of this array.


 * If the element should be appended to another already existent DOM element, it can be passed here as a string that represents the selector for it.
 * If the element should be appended to another already existent DOM element, it can be passed here as a string that represents the selector for it.


 * If the element has multiple classes, this is a more useful property than setting the class through.
 * Additionally, some linters may throw warnings/errors as  is a reserved word and should not be used in property names for ES3 compatibility.
 * Additionally, some linters may throw warnings/errors as  is a reserved word and should not be used in property names for ES3 compatibility.


 * If the element should be generated.
 * Used to simplify the logic when some elements should only display under certain conditions.
 * Used to simplify the logic when some elements should only display under certain conditions.


 * Selected index of the element.
 * Used for  dropdowns.
 * Used for  dropdowns.

If a simple string is passed to the function, it will create a simple text node with contents of the string.

Examples
Examples below are using the  function to generate DOM elements. Instructions on how to get that function can be seen in the "Importing" section and more information about its parameters is in "Function" section.