将Straight JS转换为JQuery

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

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

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

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://sofzh.miximages.com/javascript/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循环中每个循环需要引用不同的元素，

提前致谢！ 迈尔斯

编辑：

HTML代码：

          
 
I'm listening to...
 
 
 
   
  
 
 
 
 
 
 
 
Test 1 
 
Test 2 
 
Test 3 
 
Test 4 
 
 
 
 
 
 
 
 
  

Answer 1

代替

 document.body.appendChild( ... ); 

让你的函数找到你希望添加内容的

，如下所示：

 var targetDiv = document.getElementById('lfmRecentTracks'); 

（ 确保页面上只有一个元素具有“id”值!!另外，为了IE，请确保名称不是任何“name”属性。）

然后你应该能够做到这一点：

 targetDiv.appendChild( whatever ); 

Answer 2

document.getElementById()和appendChild()通常在所有主流浏览器中都能正常工作，除了IE（可能无关）使用id和name可互换的问题。 这里没有必要使用jQuery。

Answer 3

没有理由这样做。 jQuery是JavaScript，但增加了function。 如果它在JavaScript中不起作用，翻译的jQuery也不会工作。 这甚至没有提到翻译它的额外（不必要的）工作。

Answer 4

我不会争论你是否需要jQuery。 这不是必需品。 但是，如果你想使用它，这就是你用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, date; var oTracks = new Array().concat(JSONdata.recenttracks.track); for (var i = 0; i < oTracks.length; i++) { //insert coverart image var spanTag = $(''); $("body").append(spanTag); if(oTracks[i].image[1]["#text"] != "") { eImg = $(''); spanTag.appendChild(eImg); }else{ eImg = $(''); spanTag.appendChild(eImg); } } for (var i = 0; i <>[lessthanhere] oTracks.length; i++) { //insert track link spanTag = $(''+truncateName(oTracks[i].name, 25)+''); //alert(truncateName(oTracks[i].name, 25)); //alert(oTracks[i].url); $("body").append(spanTag); //insert artist name eSpan = $(''+truncateName(oTracks[i].artist["#text"], 22)+''); //alert(truncateName(oTracks[i].artist["#text"], 22)); $("body").append(eSpan); //insert date date = (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts)); eSpan = $(''+ date +''); spanTag.append(eSpan); //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); $("body").append(eSpan); } } catch(e) {} } 

现在，我不保证生产中是否有效，但看起来是正确的。 另外，我不确定你用i <>[lessthanhere] oTracks.length;做了什么i <>[lessthanhere] oTracks.length; 部分，所以我把它留进了。通常情况下，它是i < oTracks.length; 。

Answer 5

它应该很简单。 如果有一件事jQuery擅长（并且有很多），那就是DOM操作（即你正在尝试做的事情。）从这些教程开始

http://docs.jquery.com/Tutorials:How_jQuery_Works

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

第二个将为您提供将HTML插入文档的良好介绍。 之后，只需查看文档的操作部分。