Problem with HTML inside Javascript

Question

I am trying to implement 'time-ago' feature in my website using a JQuery timeago plugin. Unfortunately I have encountered some problems.

<script type="text/javascript" charset="utf-8">
jQuery("abbr.timeago").timeago();
</script>

var content = document.getElementById('div');

var html = "<abbr class=timeago title=2008-07-17T09:24:17Z></abbr>" + '<br>';
content.innerHTML += html

<div id='div'></div>

This jquery plugin basically convert timestamp from the title and print it in a nice format for every abbr class=timeago. The problem is that the code above doesn't work, but if I put it within this div it works fine. I think it is maybe because this jquery plugin is applied before generating html by javascript, but I am not sure. Any ideas?

Answer 1

var html = "<abbr class=timeago title=2008-07-17T09:24:17Z></abbr>" + '<br><br>';

First off, put your attributes in quotes:

var html = "<abbr class=\"timeago\" title=\"2008-07-17T09:24:17Z\"></abbr>" + '<br><br>';

Also, refer to this page: http://www.w3schools.com/TAGS/tag_abbr.asp

The point of the ABBR tag is to give additional information regarding an inline element for crawlers and the like. I'm hard-pressed to think of a reason you might want to use this for a datetime.

I'd say rather than crawling through a plugin you don't know very well trying to find out why it likes divs rather than abbr's, just use the div. If it has to be an inline element, use <span>.

Answer 2

The problem, I bet, is that your statement that initializes the "timeago" plugin is running before you put the <abbr> element into the page. Therefore, when it runs, nothing happens.

Why would you add to the DOM with that primitive code when you've got jQuery anyway?

$('#div').append($('<abbr/>')
  .addClass('timeago')
  .attr('title', '2008-07-17T09:24:17Z')
).append($('<br/>')).append($('<br/>'))
.find('abbr.timeago').timeago();

(I'm assuming that you really do have a <div> element with the "id" value "div".)

The statement:

$('abbr.timeago').timeago();

means, "find all <abbr> elements with the class "timeago", and initialize the "timeago" plugin on each of them." It does not mean, "any time there's an <abbr> element on the page, and it has the class "timeago", well then make sure that the "timeago" plugin is set up for it."

Answer 3

I figured it out myself. It's better to use jQuery.timeago(timestamp) function than deal with abbr and so on.