back to Overview

.add()

Adds the given node(s) as children to the list's HTML elements.
Web module only.

Syntax Variants

list.add(text)
list.add(node)
list.add(list)
list.add(factoryFunction)

Parameters

text
a string or number to add as text node
node
a DOM node to add to the list. If the list has more than one element, the given node will be added to the first element. For all additional elements, the node will be cloned using clone().
list
a list containing text and/or nodes. May also contain nested lists with nodes or text..
factoryFunction
a function(listItem, listIndex) that will be invoked for each list element to create the nodes:
listItem
The list element that will receive the new children.
listIndex
The index of the list element that will receive the new children.
(callback return value)
The node(s) to be added to the list element. Can be either a string for a text node, an HTML element or a list containing strings and/or DOM nodes. If a function is returned, it will be invoked recursively with the same arguments.
(return value)
the current list

Description

Adds the given node(s) as children to the list's HTML elements. If a string has been given, it will be added as text node. DOM nodes will be added directly. If you pass a list, all its elements will be added using the rules above.

When you pass a DOM node and the target list has more than one element, the original node will be added to the first list element, and clones to all following list elements.

EE(), HTML() and clone() are compatible with add() and can help you create new HTML nodes.

Example

Using the following HTML:

<div id="comments">Here is some text.<br/></div>
The next line appends a text node to the div:
$('#comments').add('Some additional text.');
This results in:
<div id="comments">Here is some text.<br/>Some additional text.</div>

Example

Using the following HTML:

<ul id="myList">
  <li>First list entry</li>
  <li>Second list entry</li>
</ul>
The following Javascript adds an element to the list:
$('#myList').add(EE('li', 'My extra point');
This results in
<ul id="myList">
  <li>First list entry</li>
  <li>Second list entry</li>
  <li>My extra point</li>
</ul>

Example

Use a list to add several elements at once:

$('#comments').add([
     EE('br'),
    'Some text',
    EE('span', {'className': 'highlight'}, 'Some highlighted text')
]);

Example

If you need to customize the content, you can write a factory function:

$('.chapter').add(function(parent, index) { return EE('h2', 'Chapter number ' + index); });

See also..

  • fill() works like add(), but deletes all children before adding the new nodes.
  • addFront() adds nodes as first child, not as last.
  • addAfter() adds nodes not as children but as siblings.
  • addBefore() also adds nodes not as children but as siblings.
  • replace() replaces existing nodes.

Comments

comments powered by Disqus

back to Overview

Functions