getElementById().appendChild() 拒绝工作！

Question

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

提前致谢！ 迈尔斯

Answer 1

我在头部调用脚本是否会产生影响？

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

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

Answer 2

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

Answer 3

无法保证 HTML 在 JavaScript 执行时已完成解析。有多种方法可以实现您想要的功能，并且具有不同的性能特征。

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

您可以将代码放入函数中并从文档底部调用它。

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