186Part IIIDocument Objects ReferenceTable 14-6(continued) (Web hosting domain names) MethodDescriptionIE5+Moz1Safari1hasChildNodes()Determines whether current
186Part IIIDocument Objects ReferenceTable 14-6(continued) MethodDescriptionIE5+Moz1Safari1hasChildNodes()Determines whether current node has YesYesYeschildren (Boolean) insertBefore(new, ref)Inserts new child in front of another childYesYesYesremoveChild(old)Deletes one childYesYesYesreplaceChild(new, old)Replaces an old child with a new oneYesYesYesisSupported(feature, Determines whether the node supports a NoYesYesversion)particular featureThe important methods for modifying content are appendChild(), insertBefore(), removeChild(), and replaceChild(). Notice, however, that all of these methods assumethat the point of view for the action is from the parent of the nodes being affected by themethods. For example, to delete an element (using removeChild()), you don t invoke thatmethod on the element being removed, but rather on its parent element. This leaves open thepossibility for creating a library of utility functions that obviate having to know too muchabout the precise containment hierarchy of an element. A simple function that lets a scriptappear to delete an element actually does so from its parent: function removeElement(elemID) { var elem = document.getElementById(elemID); elem.parentNode.removeChild(elem); } If this seems like a long way to go to accomplish the same result as setting the outerHTMLproperty of an IE4+ object to empty, you are right. While some of this convolution makessense for XML, unfortunately the W3C working group doesn t seem to have HTML scripters best interests in mind. All is not lost, however, as you see later in this chapter. Generating new node contentThe final point about the node structure of the W3C DOM focuses on the similarly gnarledway scripters must go about generating content they want to add or replace on a page. Fortext-only changes (for example, the text inside a table cell), there is both an easy and a hardway to perform the task. For HTML changes, there is only the hard way (plus a handyworkaround discussed later). Let s look at the hard way first and then pick up the easy wayfor text changes. To generate a new node in the DOM, you look to the variety of methods that are defined forthe Core DOM s documentobject (and are therefore inherited by the HTML documentobject). A node creation method is defined for nearly every node type in the DOM. The two importantones for HTML documents are createElement()and createTextNode(). The first gener- ates an element with whatever tag name (string) you pass as a parameter; the second gener- ates a text node with whatever text you pass. When you first create a new element, it exists only in the browser s memory and not as partof the document containment hierarchy. Moreover, the result of the createElement() method is a reference to an empty element except for the name of the tag. For example, tocreate a new pelement, usevar newElem = document.createElement( p );