Question

I’m attempting to create divs in an table using jQuery. The table represents a calendar with each <td> having an ID that is equal to the ISO formatted date string. In the code below I’m having a problem with the append line. It is not adding anything to the DOM. I’ve checked the tdID values against the IDs for the cells and they do indeed match. So I’m fairly certain that is not the issue. Can someone spot where I may have gone wrong?

if (loopDate.between(past, future)) {
   var tdID = loopDate.toISOString();
   $("#" + tdID).append("<div class=&quot Event &quot>" 
                   + data.events[i].Est + "</div>");
}

Edit — here’s a sample of my html. The “d” is a character I added to the beginning of the ID to address the issue noted by @Matt Stauffer.

<td id="d2012-02-01T05:00:00.000Z">1</td>

Answer 1

Now that i see your id, although it is valid as a naming convention for the id attribute as for HTML where:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).

the problem in your case is in the use of dots (.) and colons(.) as when you are using the jquery selector, the dot(.) is interpreted as searching for a class or subclass and the colon(:) as searching for :first, :last etc

To solve your problem you could try replacing those characters with undescores(_) or hyphens(-) which should be fine.

You can check this over here at this jsFiddle