getElementById(). appendChild()가 작업을 거부합니다!

Question

임이 나를 이끌었다

의 last.fm API에서 나는 API가 올바르게 구문 분석되고 있으며, 그것이 확인하기 위해 여러 단계에서 경고()를 사용하고있다

를 일부 JSON 데이터를 추가하려고 . 여기

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) {} 
} 

012 :에서 getElementById()에 appendChild()가 작동하지 않는 결론에, 아래에 내가 설정 한 테스트 페이지의 URL입니다

유일한 방법은 document.body.appendChild()를 사용하는 것입니다.

그 차이가 있다면 머리에 스크립트를 부르겠습니까?

사업부 나는 각 루프가 다른 요소를 참조 할 필요가 for 루프,

감사에서 4 명 가지 div의 즉 사전에에 첨부하려고 해요! 마일스

Answer 1

차이가 있다면 머리에 스크립트를 부르겠습니까?

문서 본문이 파싱되지 않은 경우 getElementById() 수 없습니다. 즉, 코드를 window.onload 함수로 실행하거나 몸통 맨 아래에 배치해야합니다.

또한 테스트 중에 try/catch을 제거하면 오류 만 표시됩니다.

Answer 2

당신이 얻으려고하는 요소가 DOM에로드 되었습니까? 스크립트가 head 태그 (나머지 본문로드 전에로드 됨)에서 실행된다고했습니다. 검색중인 DOM 요소가 있기 전에 스크립트가 실행 중일 수 있으므로 스크립트를 찾을 수 없어 추가 할 수 없습니다.

Answer 3

JavaScript가 실행될 때까지 HTML이 구문 분석을 완료한다는 보장은 없습니다. 다양한 성능 특성을 사용하여 원하는대로 할 수있는 몇 가지 방법이 있습니다.

코드를 함수에 넣고이를 창 개체의로드 이벤트 처리기로 지정할 수 있습니다. 페이지의 모든 리소스가 HTML이 아니라로드가 완료 될 때까지 기다리는 단점이 있습니다. 느린 광고 서버 등을 기다릴 필요가 있기 때문에 종종 페이지로드 시간이 느려집니다.

코드를 함수에 넣고 문서의 아래에서 호출 할 수 있습니다.

DOM로드가 완료되면 jQuery와 같은 JavaScript 라이브러리를 사용하여 JavaScript를 실행할 수 있습니다. 크로스 브라우저에서 작동하는 간단한 방법은 없으므로 바퀴를 재발 명하지 않고 이미 성숙한 솔루션을 사용하는 것이 가장 간단합니다.