element-project

• El : object
  • .appendChild(element, child) ⇒ HTMLElement
  • .appendChildren(element, children) ⇒ HTMLElement
  • .create(selector) ⇒ HTMLElement
  • .setAttribute(element, attrs) ⇒ HTMLElement
  • .style(element, styles) ⇒ HTMLElement
  • .innerHTML(element, html) ⇒ HTMLElement
  • .innerText(element, text) ⇒ HTMLElement
  • .generate(selector, options) ⇒ HTMLElement
  • .get(selector) ⇒ HTMLElement
  • .getAll(selector) ⇒ NodeList
  • .insertAdjacentHTML(element, position, html) ⇒ HTMLElement

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>