Javascript中的HTML问题

Question

我正在尝试使用 JQuery timeago 插件在我的网站中实现“time-ago”功能。不幸的是，我遇到了一些问题。

<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>

这个 jquery 插件基本上是从标题转换时间戳，并为每个 abbr class=timeago 以一种不错的格式打印出来。问题是上面的代码不起作用，但如果我把它放在这个 div 中它工作正常。我认为这可能是因为这个 jquery 插件是在通过 javascript 生成 html 之前应用的，但我不确定。有什么想法吗？

Answer 1

我敢打赌，问题在于您初始化“timeago”插件的语句正在运行在您将<abbr> 元素放入页面之前。因此，当它运行时，什么也没有发生。

既然已经有了 jQuery，为什么还要将原始代码添加到 DOM 中？

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

（我假设您确实有一个“id”值为“div”的<div> 元素。）

声明：

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

的意思是，“找到所有<abbr> 类为“timeago”的元素，并在每个元素上初始化“timeago”插件。”它不是的意思是，“任何时候页面上有一个<abbr> 元素，并且它具有类“timeago”，那么请确保为它设置了“timeago”插件。 "

Answer 2

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

首先，将你的属性放在引号中：

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

另外，请参阅此页面：http://www.w3schools.com/TAGS/tag_abbr.asp

ABBR 标记的目的是为爬虫等提供有关内联元素的附加信息。我很难想出你可能想在日期时间使用它的原因。

我想说，与其爬过一个你不太了解的插件试图找出它为什么喜欢 div 而不是 abbr's，不如使用 div。如果它必须是内联元素，请使用<span>。

Answer 3

我自己想通了。最好使用 jQuery.timeago(timestamp) 函数而不是处理 abbr 等。