我正在尝试从 last.fm API 附加一些 JSON 数据，
我一直在几个阶段使用alert()来验证API是否被正确解析，它是，
这让我得出这样的结论： getElementById().appendChild() 不起作用，下面是我设置的测试页面的 URL：
http://mutant-tractor.com/tabtest.html http://mutant-tractor.com/tabtest.html
因此，有人建议我从直接 JS 迁移到 JQuery 是最好的方法，
也就是说，我对任何 JQuery 都一无所知，我的 JS 知识是基于我所做的一些基本的 Java ......
将其转换为工作 JQuery 有多简单/不简单？
我会为此悬赏，但我不知道该怎么做。
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 < oTracks.length; i++) {
//insert coverart image
var spanTag = document.createElement("span");
document.body.appendChild(spanTag);
spanTag.className = "lfmTrackImageCell tab_item";
if(oTracks[i].image[1]["#text"] != "") {
eImg = document.createElement("img");
spanTag.appendChild(eImg);
eImg.src = oTracks[i].image[1]["#text"];
eImg.className = "lfmTrackImage";
}else{
eImg = document.createElement("img");
spanTag.appendChild(eImg);
eImg.src = "http://cdn.last.fm/flatness/icons/res/3/track.png";
eImg.className = "lfmTrackImageNotFound";
}
}
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()
我尝试在正文底部调用脚本并内联，以便允许 DOM 完全加载，但这些不起作用。
我试图将它们附加到的 div 是 4 个不同的 div，即在 for 循环中每个循环需要引用不同的元素，
提前致谢！
迈尔斯
EDIT:
HTML 代码：
<link href='css/style.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" media="all" href="http://beta.mutant-tractor/wp-content/themes/toolbox/style.css" />
<link href='/css/tabbedContent.css' rel='stylesheet' type='text/css' />
<script src="/scripts/JQuery/tabbedContent.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/General/lastfmtest.js"></script>
</head>
<body>
<aside class="widget">
<h3>I'm listening to...</h3>
<div class="tabbed_content">
<div id="lfmArtRow" class="tabs">
<div class="moving_bg">
</div>
<script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=mutant_tractor&api_key=6b85edc3841f3d0935d9dfed9c556634&limit=4&format=json&callback=lfmRecentTracks"></script>
</div>
</aside>
<div id="lfmRecentTracks" style='padding: 15px;'>
<div class="content">
<div class="tabbed_content">
<div class="slide_content">
<div class="tabslider">
<div class="sliding_info">Test 1
</div>
<div class="sliding_info">Test 2
</div>
<div class="sliding_info">Test 3
</div>
<div class="sliding_info">Test 4
</div>
</div>
<br style="clear: both" />
</div>
</div>
</div>
</div>
<div id="test">
</div>
</body>
