Dynamically Modifying the DOM with Javascript: CD Collection App Post 01

In this series of posts, I will be attempting to build a simple application that will allow me to catalog my CD collection. Whenever possible I will be using Javascript to modify the DOM of the application to respond as close to a desktop application as possible.

Let’s create a simple HTML list to display the tracks of a CD.
index.html …

<ol id="disc_1_tracks">
  <li id="disc_1_track_1">Disc 1`Track 1</li>
  <li id="disc_1_track_2">Disc 1 Track 2</li>
</ol>

To accommodate the dynamic functionality of our new track list, we can add a temporary <a> to add additional tracks to the list.
index.html modified …

<ol id="disc_1_tracks">
  <a href="">Add Track to Disc 1</a>
  <li id="disc_1_track_1">Disc 1`Track 1</li>
  <li id="disc_1_track_2">Disc 1 Track 2</li>
</ol>

Now we are ready to build some Javascript functions that will add new tracks to the disc dynamically.
index.html modified …

<html>
  <head>
    <script language="Javascript">
      function addNewTrack(disc)
      {
        //Purpose: Adds a new track <li> to the current disc <ol>
        var currentDisc = document.getElementById('disc_' + disc + '_tracks');

        var trackLI = document.createElement('li');
        trackLI.id = 'disc_' + disc + '_track_' + (countTracks(disc) + 1);

        var trackLITN = document.createTextNode("Disc " + disc + " Track " + (countTracks(disc) + 1));

        trackLI.appendChild(trackLITN);
        currentDisc.appendChild(trackLI);
      }

      function countTracks(disc)
      {
        //Purpose: Counts the number of tracks for the current disc

        var discToCount = document.getElementById('disc_' + disc + '_tracks');
        //Count the child <li>s
        var trackCount = discToCount.getElementsByTagName('li').length;
        return trackCount;
      }
    </script>
  </head>
<body>

<ol id="disc_1_tracks">
  <a href="Javascript:addNewTrack(1);">Add Track to Disc 1</a>
  <li id="disc_1_track_1">Disc 1`Track 1</li>
  <li id="disc_1_track_2">Disc 1 Track 2</li>
</ol>

</body>
</html>

The two new Javascript functions are addNewTrack() and countTracks(). Our <a> tag in the <body> has been modified to “Javascript:addNewTrack(1);”. This simply allows us to use a hyperlink to call our Javascript function. Now let’s go through the two functions in greater detail.

Step by step tasks of addNewTrack():

  1. By using getElementById() we create the currentDisc element which contains all the references needed for the current disc.
  2. We then create a new <li> element and set its id attribute. You will notice that we call the countTracks() function to determine the number of the new track we are creating (I will explain this more in the step by step walkthrough of the countTracks() function.
  3. To add some text to the new<li> we create a new textnode (trackLTTN), and set the text we want to display.
  4. With the new <li> element we first append the textnode (trackLTT) as a child.
  5. Finally we add the <li> element to the currentDisc as a child.

Step by step tasks of countTracks():

  1. Again using the getElementById(), we create an object to reference the current disc.
  2. Then we create a variable that is the length (or count of elements) of all the <li> elements within our discToCount object.
  3. Finally we return the value of our trackCount variable.

Below is a screen shot of index.html in action:

DOM Example 001 Add Tracks to Disc

As you can see, each time the “Add Track to Disc 1” hyperlink is clicked, the javascript will modify the DOM and append a new <li> to the target <ol>.

Before we move on to extending the functionality, lets enhance the list by including the capability to define the name of the track. This can be accomplished by adding a text input field to the <li>.
index.html modified …

function addNewTrack(disc)
      {
        //Purpose: Adds a new track <li> to the current disc <ol>
        var currentDisc = document.getElementById('disc_' + disc + '_tracks');

        var trackLI = document.createElement('li');
        trackLI.id = 'disc_' + disc + '_track_' + (countTracks(disc) + 1);

        var trackLIInput = document.createElement('input');
        trackLIInput.type = "text";
        trackLIInput.value = "Disc " + disc + " Track " + (countTracks(disc) + 1);
        trackLIInput.name = "disc_" + disc + "_track_" + (countTracks(disc) + 1) + "_name";
        trackLIInput.id = "disc_" + disc + "_track_" + (countTracks(disc) + 1) + "_id";

        trackLI.appendChild(trackLIInput);
        currentDisc.appendChild(trackLI);
      }

By changing our addNewTrack() function we now have a new text input box for each new track that is added to the list.

Here is an updated screenshot:

DOM Example 002 Add Tracks to Disc with text input

Things are starting to function dynamically. Post 2 will further expand upon our Javascript and enhance our client side application.

Advertisements

One Response to Dynamically Modifying the DOM with Javascript: CD Collection App Post 01

  1. manda says:

    can javascript modifying css?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: