back to Overview

.replace()

Replaces the list items with the the given node(s) in the DOM tree.
Web module only.

Syntax Variants

list.replace(text)
list.replace(node)
list.replace(list)
list.replace(factoryFunction)

Parameters

text
a text for the text nodes that replace 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 determine its content:
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

Replaces the list items with the the given node(s) in the DOM tree. If a string has been given, it will be set 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 replace() and can help you create new HTML ndoes.

Example

Using the following HTML: 

<div id="comments">
   <div id="commentOne">My old comment.</div>
</div>
This replaces the div 'commentOne': 
$('#commentOne').replace('Some new comment.');
The resulting HTML is: 
<div id="comments">
   Some new comment.
</div>
Please note that not only the text has changed, but the whole <div> has been replaced. If you only want to replace the element's text content you should use fill() instead of replace().

Example

Using the following HTML: 

<ul id="myList">
  <li>First list entry</li>
  <li>Second list entry</li>
</ul>
The following example will replace only the first <li> element: 
$('#myList li').sub(0, 1).replace(EE('li', 'My extra point'));
This results in 
<ul id="myList">
  <li>My extra point</li>
  <li>Second list entry</li>
</ul>

See also..

  • fill() replaces all children with new nodes.
  • add() adds elements as last child.
  • addFront() adds nodes as first child.
  • addAfter() adds nodes not as children but as siblings.
  • addBefore() also adds nodes not as children but as siblings.

Comments

comments powered by Disqus

back to Overview

Functions