JavaScript And The Document Object Model Adding a new note

JavaScript and the Document Object Model

By Nicholas Chase - 2004-03-10 Page: 1 2 3 4 5 6 7 8

Adding a new note

The actual note itself is just a small box with standard text and a link that enables the user to edit the text later, as seen in Figure 2.

Figure 2. The new note

This is the equivalent of the following HTML:

Listing 3. The target HTML




<div id="note1" style="width: 100; height:100; border: 1px solid blue; 
                       background-color: yellow; position: absolute; 
                       top: 150; left: 135">
    <a href="javascript:editNote('note1')">edit</a>
    <br />
    New note
</div>

Adding the actual element uses standard DOM techniques, as seen in Listing 4:

Listing 4. Adding the new note element




<html>
  <head>
    <title>Getting Sticky</title>
    <style type="text/css">
      * {font-family: sans-serif}
      a {font-size: 6pt}
      .editButton {font-size:6pt}
    </style>


    <script type="text/javascript">
...
      function getCurrentNumber() {
        formElement = document.getElementById("noteForm");
        return formElement.childNodes.item(1).value;
      }

      function makeNewNote(){
        mainDivElement = document.getElementById("mainDiv");

        newNote = document.createElement("div");
        newNote.setAttribute("id", "note"+getCurrentNumber());

        mainDivElement.appendChild(newNote);

        incrementCurrent();

      }
    </script>
  </head>
  <body>

    <div id="mainDiv" style="height:85%; width:85%; border:3px solid red; 
                                             padding: 10px; z-index: -100" >
    
       <h1>Getting Sticky</h1>

       <form id="noteForm">
           Current number of notes  <input type="text" name="total" value="0" 
                                             size="3"/>
           <input type="button" value="Add a new note" 
                                             onclick="makeNewNote()"/>

       </form>

    </div>
  </body>
</html>

In this case, you've changed the button so that it causes the execution of makeNewNote() rather than incrementCurrent(), though that function is still in use within makeNewNote(). First, you use getElementById() to get a reference to the main div element that ultimately will contain the note. You then use the document object to create a new element, just as you would do in any other language, with the name of div. To set the id attribute, you simply use the setAttribute() method on the new element.

Each note will have a unique id attribute, so you need to know what the current total is. To get this information, you start at the level of the form element itself. From there, you retrieve the list of children. The first (with an index of 0) is the text, and the second (with an index of 1) is the actual input element.

But what about .value? Isn't that a typo? Shouldn't it be nodeValue?

Actually, no. Remember, elements don't have values. At first glance, it might look as though I'm mixing DOM and DHTML properties, but in actuality, the element retrieved here is not just an implementation of org.w3c.dom.Element, it's an implementation of org.w3c.dom.html.HTMLInputElement, which also includes a value property that represents the value of the form field. In this way, DOM mimics some (though not all) of the properties that were available through DHTML.

Once the attribute is set, you simply append the new div element to the mainDiv element, where it will appear. Or at least, it would if it had any presentation properties or text.

To add the style information, you will actually use the DHTML style object:

Listing 5. Adding style information




...
      function makeNewNote(){
        mainDivElement = document.getElementById("mainDiv");

        newNote = document.createElement("div");
        newNote.setAttribute("id", "note"+getCurrentNumber());

        newNote.style.width="100";
        newNote.style.height="100";
        newNote.style.border="1px solid blue";
        newNote.style.backgroundColor="yellow";
        newNote.style.position="absolute";
        newNote.style.top=(150);
        newNote.style.left=(25 + 110*getCurrentNumber());

        mainDivElement.appendChild(newNote);

        incrementCurrent();

      }
...

The result is a small yellow box with a blue border, as shown in Figure 3.

Figure 3. The empty box

Notice that the left property of the note depends on the current number of notes, which increments after each note is added. This way, you can add a series of boxes, as shown in Figure 3.

View JavaScript and the Document Object Model Discussion

Page: 1 2 3 4 5 6 7 8 Next Page: Adding the content

First published by IBM developerWorks