Element Project

El.appendChild(element, child)→ {HTMLElement}

Parameters:
NameTypeDescription
elementHTMLElement
childHTMLElement
Source:
Returns:
Type
HTMLElement
Example
El.appendChild(El.get('.foo'), El.create('.bar'));

// <div class="foo">
//   <div class="bar"></div>
// </div>

El.appendChildren(element, children)→ {HTMLElement}

Parameters:
NameTypeDescription
elementHTMLElement
childrenArray.<HTMLElement>
Source:
Returns:
Type
HTMLElement
Example
El.appendChildren(El.get('ul#foo'), [
   El.generate('li.bar', {innerText: 1}),
   El.generate('li.baz', {innerText: 2}),
   El.generate('li.qux', {innerText: 3}),
]);

// <ul id="foo">
//   <li class="bar">1</li>
//   <li class="baz">2</li>
//   <li class="qux">3</li>
// </ul>

El.create(selector)→ {HTMLElement}

Parameters:
NameTypeDescription
selectorString(tag [, id, class])
Source:
Returns:
Type
HTMLElement
Example
El.create('div');
// <div></div>

El.create('section#foo.bar.baz');
// <section id="foo" class="bar baz"></section>

El.create('#foo.bar.baz');
// <div id="foo" class="bar baz"></div>

El.generate(selector, options)→ {HTMLElement}

Parameters:
NameTypeDescription
selectorString
optionsObject
Source:
Returns:
Type
HTMLElement
Example
El.generate('ul', {
   attribute: {
     id: 'foo',
     class: 'bar baz'
   },
   style: {
     width: '50%'
   },
   children: [
     El.generate('li', {innerHTML: 1}),
     El.generate('li', {innerHTML: 2}),
     El.generate('li', {innerHTML: 3}),
     El.generate('li', {innerHTML: 4})
   ]
});

// <ul id="foo" class="bar baz" style="width: 50%;">
//   <li>1</li>
//   <li>2</li>
//   <li>3</li>
//   <li>4</li>
// </ul>

El.get(selector)→ {HTMLElement}

Parameters:
NameTypeDescription
selectorString
Source:
Returns:
Type
HTMLElement
Example
El.get('div');
// <div></div>

El.get('span#foo.bar');
// <span id="foo" class="bar"></span>

El.getAll(selector)→ {NodeList}

Parameters:
NameTypeDescription
selectorString
Source:
Returns:
Type
NodeList
Example
El.getAll('div');
// [div, div, div, ...*]

El.getAll('span.foo');
// [span.foo, span.foo, span.foo, ...*]

El.innerHTML(element, html)→ {HTMLElement}

Parameters:
NameTypeDescription
elementHTMLElement
htmlString
Source:
Returns:
Type
HTMLElement
Example
El.innerHTML(El.get('section'), '<div>Hello World</div>');

// <section>
//   <div>Hello World<div>
// </section>

El.innerText(element, text)→ {HTMLElement}

Parameters:
NameTypeDescription
elementHTMLElement
textString
Source:
Returns:
Type
HTMLElement
Example
El.innerText(El.get('div'), 'Hello World');
// <div>Hello World<div>

El.insertAdjacentHTML(element, position, html)→ {HTMLElement}

Parameters:
NameTypeDescription
elementHTMLElement
positionStringbeforeBegin|afterBegin|beforeEnd|afterEnd
htmlString
Source:
Returns:
Type
HTMLElement
Example
// <div id="test">
//   <span>World</span>
// </div>

El.insertAdjacentHTML(El.get('#test'), 'beforeBegin', '<span>Hello</span>');
// <span>Hello</span>
// <div id="test">
//   <span>World</span>
// </div>

El.insertAdjacentHTML(El.get('#test'), 'afterBegin', '<span>Hello</span>');
// <div id="test">
//   <span>Hello</span>
//   <span>World</span>
// </div>

El.insertAdjacentHTML(El.get('#test'), 'beforeEnd', '<span>Hello</span>');
// <div id="test">
//   <span>World</span>
//   <span>Hello</span>
// </div>

El.insertAdjacentHTML(El.get('#test'), 'afterEnd', '<span>Hello</span>');
// <div id="test">
//   <span>World</span>
// </div>
// <span>Hello</span>

El.setAttribute(element, attrs)→ {HTMLElement}

Parameters:
NameTypeDescription
elementHTMLElement
attrsObject
Source:
Returns:
Type
HTMLElement
Example
El.setAttribute(El.get('div'), {
   id: 'foo',
   class: 'bar baz'
});
// <div id="foo" class="bar baz"></div>

El.style(element, styles)→ {HTMLElement}

Parameters:
NameTypeDescription
elementHTMLElement
stylesObject
Source:
Returns:
Type
HTMLElement
Example
El.style(El.get('div'), {
   width: '100px',
   height: '100px',
   background: 'blue'
});
// <div style="width: 100px; height: 100px; background: blue"></div>