back to Overview

EE()

Creates a new HTML Element, wrapped in a Minified list, optionally with attributes and children.
Web module only.

Syntax Variants

EE(elementName)
EE(elementName, properties)
EE(elementName, children)
EE(elementName, properties, children)

Parameters

elementName
the element name to create (e.g. 'div')
properties (optional)
an object which contains a map of attributes and other values. Uses the set() syntax: Attribute values are prefixed with '@', data attributes with '%', CSS styles with '$' and regular properties can be set without prefix. If the attribute value is null, the attribute will omitted (styles and properties can be set to null). In order to stay compatible with Internet Explorer 7 and earlier, you should not set the attributes '@class' and '@style'. Instead set the property 'className' instead of '@class' and set styles using the '$' syntax.
children (optional)
a node or a list of nodes to be added as children. Strings will be converted to text nodes. Functions will be invoked and their return value will be used. Lists can be nested and will then automatically be flattened. Null elements in lists will be ignored. The syntax is exactly like add().
(return value)
the HTML Element wrapped in a Minified list

Description

Creates a new HTML Element, wrapped in a Minified list, optionally with attributes and children. Typically it will be used to insert elements into the DOM tree using add() or a similar function.

Please note that the function EE will not be automatically exported by Minified. You should always import it using the recommended import statement: 

var MINI = require('minified'), $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;

Example

Creating a simple <span> element with some text: 

var mySpan = EE('span', 'Hello World');
This is the result: 
 <span>Hello World</span>

Example

Adding the '<span>Hello World; <span> element to all elements with the class '.greeting': 

$('.greeting').add(EE('span', 'Hello World'));

Example

Creating a <span> element with style and some text: 

var span2 = EE('span', {'@title': 'Greetings'}, 'Hello World');
The last line creates this: 
 <span title="Greetings">Hello World</span>

Example

Creating a <form> element with two text fields, labels and a submit button: 

var myForm = EE('form', {'@method': 'post'}, [
    EE('label', {'@for': 'nameInput'}, 'Name:'),
    EE('input', {'@id': 'nameInput', '@type': 'input'}),
    EE('br'),
    EE('label', {'@for': 'ageInput'}, 'Age:'),
    EE('input', {'@id': 'ageInput', '@type': 'input'}),
    EE('br'),
    EE('input', {'@type': 'submit, '@value': 'Join'})
]);
results in (newlines and indentation added for readability): 
	<form method="post>
    <label for="nameInput">Name:</label>
    <input id="nameInput" type="input"/>
    <br/>
    <label for="ageInput"/>Age:</label>
    <input id="ageInput" type="input"/>
    <br/>
    <input value="Join" type="submit"/>
 </form>

Example

If you only want to add an attribute under a certain condition, a simple trick is to pass null as value if you do not need it: 

var myInput = EE('input', {
				'@id': 'myCheckbox',
				'@type': 'checkbox',
				'@checked': shouldBeChecked() ? 'checked' : null
			});

Example

You can set styles directly using a $ prefix for the name: 

var myStylesSpan = EE('span', {$color: "red", $fontWeight: "bold"}, "I'm styled");

Example

on() makes it very easy to attach event handlers to the new elements directly after creating them: 

$('#target').add(EE('input', {'@name': "myInput"}).on('change', inputChanged));
});

Comments

comments powered by Disqus

back to Overview

Functions