02. Create Element (dcE.js)

<< Previous

Back to Table of Contents

Next >>

    “Anything does not exist until it is created. You create it” ― Bangambiki Habyarimana, The Great Pearl of Wisdom

"dcE" is short for "document.createElement".

This will create and return a HTML elemenent with specified attributes, children, and event listeners.

Code:

const dcE=(t,a,d,c,e)=>{let l=a?a.length?a.length:0:0,k=d?d.length?d.length:0:0,y=c?c.length?c.length:0:0,p=e?e.length?e.length:0:0,m=document.createElement(t);while(l--)m.setAttribute(a[l][0],a[l][1]);while(k--)m[d[k][0]]=d[k][1];while(y--)m.appendChild(c[y]);while(p--)m.addEventListener(e[p][0],e[p][1]);return m;}

Usage:

let e = dcE("elementType", [[key,value],[key,value],...], [[key,value],[key,value],...], [[HTMLElement],[HTMLElement],...], [["eventType", callback], ["eventType", callback],...]);

• use false instead of an array to skip that parameter.

Return:

A HTML Element of the type specified and with any attributes, appended children, or event listeners added.

Params:

dcE(t,a,d,c,e)

t = < ElementType String > * REQUIRED

• A string, such as: "div", "a", "ul", "span", etc..
• This uses document.createElement(). Therefore, this string must be compatible.
• This is the only required parameter. All the rest are pseudo-optional.

---NOTE: All parameters below will process the array backwards (Last item in the array will be applied first).

a = < 2D array of attributes ([key,value]) to set > OR < false equivalent >

• The 2D array example is: [["checked", false], ["id", "foo"]]. Note: the first item must be a quoted ("") string. The second item is object-safe. And as an example, the constant false was used as a second item here.
• This uses the element.setAttribute("attribute", value) method of setting attributes.
• The < false equivalent > is suggested to use false and it will skip this parameter, same as not including this parameter, or making it optional.
• You must include this parameter in order to use the below parameters (use false if not needed).

d = < 2D array of attributes ([key,value]) to set by dot notation > OR < false equivalent >

• The 2D array example is: [["innerHTML", hVar], ["disabled", "true"]]. Note: the first element must be a quoted ("") string. The second is object-safe. And as an example, a variable hVar was used as a second item here.
• This uses the element["attribute"] alternate method of dot notation access to set an attribute. Note: There are differences between this and the method above. .setAttribute() is often suggested instead of dot notation. However, there are otherwise no differences in the code here in dcE.
• The < false equivalent > is suggested to use false and it will skip this parameter, same as not including this parameter, or making it optional.
• You must include this parameter in order to use the below parameters (use false if not needed).

c = < 1D array of children to append > OR < false equivalent >

• The 1D array example is: [cDiv, myChildElement, dcE("span")]. Note: These items are expected, but not verified, to be html elements that can be append into other html elements. Also as an example, dcE itself was used as an item in the array.
• This uses the element.appendChild(child) method of adding html elements to another html container.
• The < false equivalent > should be false and it will skip this parameter, same as not including this parameter, or making it optional.
• You must include this parameter in order to use the below parameters. (use false if not needed)

e = < 2D array of event types and callback functions to add as Event Listeners > OR < false equivalent >

• The 2D array example is: [["click", myClickFunc], ["mouseover", (e)=>{e.target.style.color="red";}]]. Note: the first element must be a quoted ("") string. The second should be a function reference, as in, no (). And as an example, a in-line anonymous arrow function was used as a second item here.
• This uses the element.addEventListener("type", callback) method of setting an Event Listener.
• The < false equivalent > is suggested to use false and it will skip this parameter, same as not including this parameter, or making it optional.