Question

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

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

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

此处代码

 
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循环中每个循环需要引用不同的元素，

提前致谢！迈尔斯

Answer 1

如果这有所作为，我正在调用脚本？

如果文档正文甚至未被解析，您将无法getElementById()。换句话说，您需要在window.onload函数中运行代码，或将其放在身体的最底部。

此外，在测试时删除try/catch，它只会隐藏错误。

Answer 2

您确定您尝试获取的元素已加载到DOM中吗？你说你的脚本在head标签中运行（在其他主体加载之前加载）。您的脚本可能在您搜索的DOM元素存在之前运行，因此无法找到它，因此无法添加它。

Answer 3

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

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

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

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

getElementById（）。appendChild（）拒绝工作！

3 个答案: