node package manager

element-project

Element Project

Code Climate Build Status codecov

El.appendChild(element, child) ⇒ HTMLElement

Kind: static method of El

Param Type
element HTMLElement
child HTMLElement

Example

El.appendChild(El.get('.foo'), El.create('.bar'));
 
// <div class="foo"> 
//   <div class="bar"></div> 
// </div> 

El.appendChildren(element, children) ⇒ HTMLElement

Kind: static method of El

Param Type
element HTMLElement
children Array.<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

Kind: static method of El

Param Type Description
selector String (tag [, id, class])

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.setAttribute(element, attrs) ⇒ HTMLElement

Kind: static method of El

Param Type
element HTMLElement
attrs Object

Example

El.setAttribute(El.get('div'), {
   id: 'foo',
   class: 'bar baz'
});
// <div id="foo" class="bar baz"></div> 

El.style(element, styles) ⇒ HTMLElement

Kind: static method of El

Param Type
element HTMLElement
styles Object

Example

El.style(El.get('div'), {
   width: '100px',
   height: '100px',
   background: 'blue'
});
// <div style="width: 100px; height: 100px; background: blue"></div> 

El.innerHTML(element, html) ⇒ HTMLElement

Kind: static method of El

Param Type
element HTMLElement
html String

Example

El.innerHTML(El.get('section'), '<div>Hello World</div>');
 
// <section> 
//   <div>Hello World<div> 
// </section> 

El.innerText(element, text) ⇒ HTMLElement

Kind: static method of El

Param Type
element HTMLElement
text String

Example

El.innerText(El.get('div'), 'Hello World');
// <div>Hello World<div> 

El.generate(selector, options) ⇒ HTMLElement

Kind: static method of El

Param Type
selector String
options Object

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

Kind: static method of El

Param Type
selector String

Example

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

El.getAll(selector) ⇒ NodeList

Kind: static method of El

Param Type
selector String

Example

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

El.insertAdjacentHTML(element, position, html) ⇒ HTMLElement

Kind: static method of El

Param Type Description
element HTMLElement
position String beforeBegin
html String

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>