DHTML Methods

Divides a text node at the specified index.

oSplitNode = object.splitText ( iIndex ) 

Returns a new text node object.

This method breaks the current node into two nodes at the specified offset, keeping both in the tree as siblings.

The text node that invokes the splitText method has a nodeValue equal to the substring of the value from 0 to the specified index. This node then only contains all the content up to the offset point.

A new node of the same type, which is inserted as the next sibling of this node, contains all the content at and after the offset point. The new text node has a nodeValue of the substring of the original value from the specified index to the value length.

When the offset is equal to the length of this node, the new node has no data.

The following sample demonstrates the use of the splitText method to divide a text node in half within an UL object. When the text node is split, a new LI object is created with the createElement method. The new LI element, and the split text node are appended to the UL object with the appendChild method.

Sample Code

<script language="JavaScript">
function fnSplitNode ( ) {
var oNode=oList.firstChild.childNodes ( 0 );
var oNewNode=document.createElement ( "LI" );
var oSplitNode = oNode.splitText ( 
  oNode.nodeValue.length/2 );
oList.appendChild ( oNewNode );
oNewNode.appendChild ( oSplitNode );
}
</script>
<ul id="oList" onclick="fnSplitNode ( )">
  <li>This is a list item.
</ul>

TextNode

createElement