2

我试图从 last.fm API 附加一些 JSON 数据，

我在几个阶段一直在使用 alert() 来验证 API 是否被正确解析，它是，

这使我得出结论 getElementById().appendChild() 不起作用，下面是我设置的测试页面的 URL：

http://mutant-tractor.com/tabtest.html

代码在这里

 
function calculateDateAgo(secAgo) {
 var agoString, agoRange, agoScaled;
 if(secAgo >= (agoRange = 60*60*24)) 
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago"
 else if(secAgo >= (agoRange = 60*60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago"
 else if(secAgo >= (agoRange = 60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago"
 else if(secAgo >= -60)
   agoString = "blastin' out now";
 else
   agoString = "soon ;)";
 return agoString
}

function truncateName(name, l) {
return name.length > l ? name.substr(0,l-2) + "\u2026" : name
}

function lfmRecentTracks(JSONdata) {

try { 
 var eImg, eLink, eSpan, divTag, eWrapper;
 var oTracks = new Array().concat(JSONdata.recenttracks.track);
 for (var i = 0; i [lessthanhere] oTracks.length; i++) {
  //insert track link
  spanTag = document.createElement("span");
  spanTag.className = "lfmTrackInfoCell tabslider";
  eLink = document.createElement("a");
  eLink.appendChild(document.createTextNode( truncateName(oTracks[i].name, 25) ));
  //alert(truncateName(oTracks[i].name, 25));
  spanTag.appendChild(eLink);
  eLink.href = oTracks[i].url;
  //alert(oTracks[i].url);
  eLink.target = "new";
  eLink.className = "lfmTrackTitle";
  document.body.appendChild(spanTag);

  //insert artist name
  eSpan = document.createElement("span");
  eSpan.appendChild(document.createTextNode(truncateName(oTracks[i].artist["#text"], 22) ));
  //alert(truncateName(oTracks[i].artist["#text"], 22));
  eSpan.className = "lfmTrackArtist";
  document.body.appendChild(eSpan);

  //insert date
  eSpan = document.createElement("span");
  spanTag.appendChild(eSpan);
  eSpan.appendChild(document.createTextNode(   (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))  )); 
  //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); 
  eSpan.className = "lfmTrackDate"; 
  document.body.appendChild(eSpan);
 }  
} catch(e) {}
}

它工作的唯一方法是使用 document.body.appendChild()

如果这有什么不同，我会在头脑中调用脚本吗？

我试图将它们附加到的 div 是 4 个不同的 div，即在 for 循环中，每个循环都需要引用不同的元素，

提前致谢！迈尔斯

4

3 回答 3

4

如果这有什么不同，我会在头脑中调用脚本吗？

getElementById()如果文档正文甚至没有被解析，你将无法做到。换句话说，你需要在一个window.onload函数中运行你的代码，或者把它放在你身体的最底部。

另外，删除try/catchwhile测试，它只会隐藏错误。

于 2011-01-11T17:16:42.870 回答
1

您确定要获取的元素已加载到 DOM 中吗？您说您的脚本在 head 标记中运行（在正文的其余部分加载之前加载）。您的脚本可能在您正在搜索的 DOM 元素存在之前运行，因此它找不到它，因此它无法添加到它。

于 2011-01-11T17:17:32.707 回答
0

无法保证 HTML 将在 JavaScript 执行时完成解析。有几种方法可以做你想做的事，具有不同的性能特征。

您可以将代码放在一个函数中，并将其分配为窗口对象的加载事件处理程序。这样做的缺点是要等到页面的所有资源都完成加载，而不仅仅是 HTML。这通常会减慢页面加载时间，因为您需要等待缓慢的广告服务器等。

您可以将代码放在一个函数中，然后从文档底部调用它。

当 DOM 完成加载时，您可以使用 JavaScript 库（例如 jQuery）来执行 JavaScript。没有一种简单的方法可以跨浏览器工作，因此最简单的方法是不要重新发明轮子，而只是使用已经成熟的解决方案。

于 2011-01-11T17:21:21.047 回答