Question

I’ve created two functions to load expanded views of a month in the archive section of my blog when it’s link is clicked:

// Load open view of a month in the Archive section function loadMonth(date) {   // Remove other open month      removeMonth();    // Hide opening month's link   // Define variable to hold month anchor tag      var monthLink = document.getElementById(date);       monthLink.style.display = 'none'; // Hide month anchor    // Define new open month node and its attributes      var openMonth = document.createElement('div');      openMonth.setAttribute('id', 'openMonth');      openMonth.innerHTML = 'Testing one, two, three.';    // Insert open month   // Define a variable to hold the archive Div node      var archive = document.getElementById('archive');   // Insert the open month in the archive node before it's link      archive.insertBefore(openMonth,monthLink);       return;   }   // Close full view of a month and replace with respective link function removeMonth() {    // Define global function vars      var archive = document.getElementById('archive'); // Define a var to hold the archive Div node      var openMonth = document.getElementById('openMonth'); // Define var to hold the open month Div node    // Get date of full view month for replacement anchor tag where ID = date      var month = openMonth.getElementsByTagName('span')[0].innerHTML; // Define var to hold the name of the open month      var date = (new Date(month + ' 15, 2008').getMonth() + 1); // Define var to hold the numerical equivalent of the month      var year = archive.getElementsByTagName('h3')[0].innerHTML.split(' '); // Define var to hold the year being displayed in the archive      date = year[1] + '' + date; // Change date var to string and insert year    // Remove the open month      archive.removeChild(openMonth);    // Show Link for that month      document.getElementById(date).className = 'big'; // Fixes display error when anchor has class firstLink      document.getElementById(date).style.display = 'inline'; // Returns link from display 'none' state      return; } 

The functions work when run on the original static content, but when a second link is clicked in the archive, they do nothing. I am wondering if maybe because the elements that were created by my functions cannot be called by document.getElementById. Perhaps a different method of accessing those nodes should be used, or maybe replacing ‘document’ with something that works on javascript created elements too?

Any advice would be greatly appreciated. Thanks.

Answer 1

To answer your main question: document.getElementById does work with dynamically added elements.

In your sample code you are creating the openMonth div and setting its innerHTML. Then in the remove tag you are doing this:

var month = openMonth.getElementsByTagName('span')[0].innerHTML; 

openMonth.getElementsByTagName('span') will not exist and will get an error because there are no span elements. I don’t know if this is a mistake in the code or if it is just a incomplete sample in the post.