JavaScript Examples Bible - UserWorks Technologies

Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)
All characters of the text fragment, including spaces, are replaced. Therefore,
you may need to supply a trailing space, as shown here, if the fragment you replace
has a space.
document.all.myP.replaceAdjacentText(“beforeEnd”, “ good people.”)
This is another way to replace the text fragment following the myEM element, but
it is also relative to the surrounding myP element. If you now attempt to replace text
after the end of the myP block-level element,
document.all.myP.replaceAdjacentText(“afterEnd”, “Hooray!”)
the text fragment is inserted after the end of the myP element’s tag set. The fragment
is just kind of floating in the document object model as an unlabeled text node.
replaceChild(newNodeObject, oldNodeObject)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓
Example
You can see an example of replaceChild() as part of Listing 15-21 earlier in
this chapter.
replaceNode(“newNodeObject”)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓
Example
Listing 15-31 demonstrates three node-related methods: removeNode(),
replaceNode(), and swapNode(). These methods work in IE5+ only.
The page rendered from Listing 15-31 begins with a UL type list of four items. Four
buttons control various aspects of the node structure of this list element. The first
button invokes the replace() function, which changes the UL type to OL. To do this,
the function must temporarily tuck away all child nodes of the original UL element so
that they can be added back into the new OL element. At the same time, the old UL
node is stored in a global variable (oldNode) for restoration in another function.
To replace the UL node with an OL, the replace() function creates a new, empty
OL element and assigns the myOL ID to it. Next, the children (LI elements) are stored
en masse as an array in the variable innards. The child nodes are then inserted into
the empty OL element, using the insertBefore() method. Notice that as each
child element from the innards array is inserted into the OL element, the child element
is removed from the innards array. That’s why the loop to insert the child
nodes is a while loop that constantly inserts the first item of the innards array to
87
elementObject.replaceNode()