back to Overview

.fill()

Sets the content of the list's HTML elements, replacing old content.
Web module only.

Syntax Variants

list.fill()
list.fill(text)
list.fill(node)
list.fill(list)
list.fill(factoryFunction)

Parameters

text
a string to set as text node of the list elements
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

Sets the content of the list's HTML elements, replacing old content. 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 fill() and can help you create new HTML ndoes.

Call fill() without arguments to remove all children from a node.

Example

Using the following HTML: 

<div id="status">Done</div>
fill() with a simple string replaces the element's content with the new text: 
$('#status').fill('Please Wait..');
Results in: 
<div id="status">Please Wait..</div>

Example

Pass an element to replace the old content with the element: 

$('#status').fill(EE('span', {'className': 'bold'}, 'Please Wait...'));
With the previous example's HTML, this would create this: 
<div id="status"><span class='bold'>Please Wait..</span></div>

Example

You can also pass a list of elements and texts: 

$('#status').fill(['Here', EE('br'), 'are', EE('br'), 'four', EE('br'), 'lines.]);

Example

Or a complete structure built using EE: 

$('#myListContainer').fill([
    EE('h2', 'My List'),
    EE('ol', [EE('li', 'First Item'), EE('li', 'Second Item'), EE('li', 'Third Item')])
]);

Example

You can write a factory function that re-creates the list for every instance: 

$('.listContainers').fill(function(e, index) { return [
    EE('h2', 'List Number '+index),
    EE('ol', [EE('li', 'First Item'),
    EE('li', 'Second Item'),
    EE('li', 'Third Item')
])]});

Example

fill() without arguments deletes the content of the list elements: 

$('.listContainers').fill();

See also..

  • add() works like fill(), but does not delete children.
  • 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.
  • ht() is a alternative for replacing element content with a HTML snippet.

Comments

comments powered by Disqus

back to Overview

Functions