Adding New Elements

With JavaScript, you are not limited to manipulating the elements and objects supplied to a document in its HTML. In fact, you can create objects at will by inserting them into the DOM.

For example, suppose you need a new <div> element. Example 20-8 shows one way you can add it to the web page.

Example 20-8. Inserting an element into the DOM
<html>
    <head>
        <title>Adding Elements</title>
        <script src='OSC.js'></script>
    </head>
    <body>
        This is a document with only this text in it.<br /><br />

        <script>
            alert('Click OK to add an element')

            newdiv    = document.createElement('div')
            newdiv.id = 'NewDiv'
            document.body.appendChild(newdiv)

            S(newdiv).border = 'solid 1px red'
            S(newdiv).width  = '100px'
            S(newdiv).height = '100px'
            newdiv.innerHTML = "I'm a new object inserted in the DOM"
            tmp              = newdiv.offsetTop

            alert('Click OK to remove the element')
            newdiv.parentNode.removeChild(newdiv)
        </script>
    </body>
</html>

First the new element is created with createElement, then the appendChild function is called and the element gets inserted into the DOM. After this, various properties are assigned to the element, including some text for its inner HTML. And then, to make sure the new element is instantly revealed, its offsetTop property is read into the throwaway variable tmp. This forces a DOM refresh and makes the element display in any browser that might otherwise delay before doing so—particularly Internet Explorer. Figure 20-3 shows the result.

Inserting a new element into the DOM
Figure 20-3. Inserting a new element into the DOM

This new element is exactly the same as if it had been included in the original HTML, and has all the same properties and methods available.

Note

I sometimes use the technique of creating new elements when I want to create in-browser pop-up windows, because it doesn’t rely on there being a spare <div> element available in the DOM.

Removing Elements

You can also remove elements from the DOM, including ones that you didn’t insert using JavaScript—it’s even easier than adding an element. It works like this, assuming the element to remove is in the object element:

element.parentNode.removeChild(element)

This code accesses the element’s parentNode object so that it can remove the element from that node. Then it calls the removeChild method on that object, passing the object to be removed. However, to ensure the DOM instantly refreshes on all browsers, you may prefer to replace the preceding single statement with something like the following:

pnode = element.parentNode
pnode.removeChild(element)
tmp   = pnode.offsetTop

Here, the first statement places a copy of element.parentNode (the parent element of the object) in pnode, which (after the child element is removed in the second line) has its offsetTop property read into the throwaway variable tmp, thus ensuring that the DOM is fully refreshed.

Alternatives to Adding and Removing Elements

Inserting an element is intended for adding a totally new object into a web page. If, however, all you intend to do is hide and reveal objects according to an onmouseover or other event, don’t forget that there are a couple of CSS properties you can use for this purpose, without taking such drastic measures as creating and deleting DOM elements.

For example, when you want to make an element invisible but leave it in place (and with all the elements surrounding it remaining in their positions), you can simply set the object’s visibility property to 'hidden', like this:

myobject.visibility = 'hidden'

And to redisplay the object you can use the following:

myobject.visibility = 'visible'

You can also collapse elements down to occupy zero width and height (with all the objects around it filling in the freed up space), like this:

myobject.display = 'none'

To then restore an element to its original dimensions, you would use the following:

myobject.display = 'block'

And, of course, there’s always the innerHTML property, with which you can change the HTML applied to an element. For example:

mylement.innerHTML = '<b>Replacement HTML</b>'

You can also use the O function I outlined earlier, like this:

O('someid').innerHTML = 'New contents'

And you can make an element appear to disappear like this:

O('someid').innerHTML = ''

Note

Don’t forget all the other useful CSS properties you can access from JavaScript. For example, you can use the opacity property to set the visibility of an object to somewhere between visible and invisible, and you can change the width and height properties of an object to resize it. And, of course, using the position property with values of 'absolute', 'static', or 'relative', you can even locate an object anywhere in (or outside) the browser window that you like.