UI.js

Documentation
  // Playground uno
  UI.create('p', {
  'className': 'clase-de-prueba',
  'innerHTML': 'Párrafo de prueba'
  })
  .append('.uno')

  UI.create('p', {
  'className': 'clase-de-prueba',
  'innerHTML': 'Párrafo de prueba 2'
  })
  .append('.uno')

  UI.create('p', {
  'className': 'clase-de-prueba',
  'innerHTML': 'Párrafo de prueba 3'
  })
  .prepend('.uno p:last-child')



  // Playground dos
  UI.create('button', {
    'className': 'boton-prueba',
    'innerHTML': 'Botón de prueba',
    'id': 'boton-uno'
  })
  .append('.dos')

  UI.create('button', {
    'className': 'boton-prueba-disabled',
    'innerHTML': 'Botón de prueba deshabilitado',
    'id': 'boton-dos',
    'style': 'margin-top:10px;'
  })
  .append('.dos')
  .disable()

  UI.create('button', {
    'className': 'boton-prueba-onclick',
    'innerHTML': 'Click para deshabilitar',
    'id': 'boton-tres',
    'style': 'margin-top:10px;'
  })
  .append('.dos')
  .on('click', function(event){
    event.preventDefault()
    // `this` ya es un objeto UI
    this.disable()
  })



  // Playground tres
  UI.create('div')
  .style({
    'backgroundColor': 'yellowgreen',
    'border': '1px solid rgba(0, 0, 0, .1)',
    'padding': '10px',
    'color': '#FFF'
  })
  .updateHTML('Prueba `style`')
  .append('.tres')

  UI.create('div')
  .style('backgroundColor', 'tomato')
  .style('color', 'white')
  .style('padding', '10px')
  .updateHTML('Prueba `style` 2')
  .append('.tres')

  UI.create('div')
  .style({
    'backgroundColor': 'teal',
    'border': '1px solid rgba(0, 0, 0, .1)',
    'padding': '10px',
    'color': '#FFF'
  })
  .updateHTML('Prueba de atributos')
  .setAttrs({
    'data-test': 'true',
    'mi-propiedad': 'muy molona'
  })
  .append('.tres')
www.000webhost.com