
import { Document, Element } from cinco;

// Create a new HTML5 document

let document = new Document()

    .add(
        new Element('title').text('Good morning')
    );

// Update DOM

if ( new Date().getHours > 12 ) {
    document.find('title').get(0).text('Good evening');
}

// Render to string

document.render(); // see results below

<!doctype html>
<meta charset="utf-8" />
<title>Good morning</title>

ES5 support

var cinco = require('cinco/dist'),
    Element = cinco.Element,
    Document = cinco.Document;

Element

new Element(
    { String | Function } selector,
    { Object | Function }? attributes,
    { [Element] | Elements | Function | [Function] }? children
)

// Create a h1 element
let myElement = new Element('h1');

// Get HTML source as string
myElement.render() // <h1></h1>

You can declare attributes in the selector as well:

new Element('h1#foo.bar.barz'); // <h1 id="foo" class="bar barz"></h1>

Attributes

Attributes are passed as an object:

new Element('a', { 'href': '/' }); // <a href="/"></a>

// You can also use the `attr` method
new Element('a').attr('href', '/'); // <a href="/"></a>

// Pass a function

You can also pass functions:

var props = {
    signedIn: true,
    user: {
        id: 123
    }
}

new Element('a', { href: () => '/' }); // <a href="/"></a>
new Element('a', { href: async() => await async() }); // You can use async functions

Manipulate text

let p = new Element('p');

// Setter
p.text('Hello world!') // <p>Hello world!</p>

// Gettter
p.text(); // Hello world!

Conditional rendering

The conditions, if one evaluated to false, will skip the rendering of the element.

new Element('p').condition(true); // <p></p>

new Element('p').condition(false); // 

// You can use functions

let element = new Element('p').condition(async() => await async());

// Whether or not all conditions return to true

element.satisfies(); // true|false

Append children

new Element('foo').add(new Element('bar')); // <foo><bar></bar></foo>

Clearing all children

new Element('foo').add(new Element('bar')).empty(); // <foo></foo>

Remove a child

let form = new Element('form');
let fieldset = new Element('fieldset');

form.add(fieldset);

form.render(); // <form><fieldset></fieldset></form>

// Act like an array filter() => true gets removed
form.remove(child => child.is('fieldset'));

form.render(); // <form></form>

Find

Utility to find and manipulate elements. Returns Elements

let form = new Element('form').add(
    new Element('fieldset').add(
        new Element('legend').text('Legend'),
        new Element('section.form-group').add(
            new Element('button')
        )
    )
);

// Find button and add text to it

form.find('button').each(button => button.text('Click me!'));

// Find an element by text

form.findByText('Click me!');

// Find an element by text using a regex

form.findByText(/click/i);

Classes

let elem = new Element('.c1', { className: 'c2 c3' }); // <div class="c1 c2 c3"></div>
let elem = new Element('.c1', { className: ['c2', 'c3'] }); // <div class="c1 c2 c3"></div>
let elem = new Element('.c1').addClass('c2', 'c3'); // <div class="c1 c2 c3"></div>
elem.removeClass('c3'); // <div class="c1 c2"></div>

elem.hasClass('c3'); // false

FAQs

What is cinco?

Is cinco popular?

Is cinco well maintained?

Package last updated on 12 Feb 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

cinco