htmlbuilder.js

htmlBuilder namespace

adjust (element, anchorElement, adjustment)

• element <HTMLElement> element to be adjusted
• anchorElement <HTMLElement> reference element to adjust at
• adjustment <String> adjustment definition, default "below bottom, start left"

Adjusts an element to the bounding rect of another element. The adjustment definition is given in natural words that are

• for the horizontal adjustment: start | end , left | center | right
• for the vertical adjustment: above | below , top | middle | bottom

No return value.

clear (element)

• element <HTMLElement>

Removes all child nodes of the element.

No return value.

dataFromElements (object, elementRoot)

dataToElements (object, elementRoot)

• object <Object> JSON object containing data
• elementRoot <HTMLElement> element to set data (default is document.body)

Writes data given in object to the corresponding HTML elements. In order to receive object data, an element must have a data-value-key-attribute. By default the data will be writte to the elements value. Any other attribute (as checked with checkboxes), this ca be set via the data-value-attribute-attribute.

Example

<div id="data">
  <input type="text" id="name" data-value-key="customer.name" />
  <input type="checkbox" id="commercial" data-value-key="customer.commercial" data-value-attribute="checked" />
</div>

let data = {
 "customer": {
   "name": "Bob",
   "commercial": true
 }
};
htmlBuilder.dataToElements(data, document.getElementById("data"));

No return value.

newElement (nodeDefinition, ...attributes)

• nodeDefinition <String> definition of the new node as a kind of queryselector (tagName #id .class [attribute="value"] where id, class and attributes are optional and you may define multiple classes and attributes).
• ...attributes <String|Number|Object|HTMLElement> attributes or content of the new element.

Creates a new HTML element of the given tag with attributes and/or content.

Example:

htmlBuilder.newElement("a", { "href": "https://github.com" }, "go to github.com");

Returns a HTMLElementof the specific type.

removeNodesByQuerySelectors (querySelectors, rootNode)

• querySelectors <Array of Strings> query selectors
• rootNode <HTMLElement> root element (default: document)

Removes all elements matching any of the provided query selectors.

No return value.

removeClasses (classes, rootNode = document)

• classes<Array of Strings> CSS class names
• rootNode <HTMLElement> root element (default: document)

Removes from all elemens of (including) rootNode all provided CSS classes.

No return value.