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を（使用している）

それが違いを作る場合、私は頭の中でスクリプトを呼んでいますか？私は4種類のdivあるためにそれらを添付しようとしている

divがすなわち、ループのために各ループは、異なる要素を参照するために、事前に

感謝を必要としています！ Myles

Answer 1

これは違いがある場合、私は頭でスクリプトを呼び出していますか？

文書本体が解析されていない場合は、getElementById()にすることはできません。つまり、window.onload関数でコードを実行するか、コードを本体の一番下に配置する必要があります。

また、テスト中にtry/catchを削除すると、エラーのみが表示されます。

Answer 2

取得しようとしている要素がDOMに読み込まれていますか？スクリプトはheadタグ（bodyの残りの部分が読み込まれる前に読み込まれます）で実行されます。検索しているDOM要素が存在する前にスクリプトが実行されている可能性があるため、スクリプトが見つからないため追加できません。

Answer 3

JavaScriptが実行されるまでにHTMLの解析が終了するという保証はありません。さまざまなパフォーマンス特性を備えた、あなたが望むことを実行するにはいくつかの方法があります。

コードを関数に配置し、それをウィンドウオブジェクトのロードイベントハンドラとして割り当てることができます。これには、HTMLだけでなく、ページのすべてのリソースのロードが完了するまで待つという欠点があります。遅い広告サーバーなどを待つ必要があるため、ページの読み込み時間が遅くなることがあります。

コードを関数に挿入して、ドキュメントの下部から呼び出すことができます。

DOMのロードが完了したらJavaScriptを実行するために、jQueryなどのJavaScriptライブラリを使用できます。クロスブラウザーで動作する簡単な方法はありません。そのため、ホイールを再開発せず、既に成熟したソリューションを使用するのが最も簡単です。