getElementById(). AppendChild() отказывается работать!

Question

Im пытается добавить некоторые данные в формате JSON с last.fm API,

я использую сигнал() в несколько этапов, чтобы проверить 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()

Я звоню сценарий в голове, если это имеет значение?

ДИВ Я пытаюсь прикрепить их к 4 различных дивы то есть в течение цикла каждый цикл должен ссылаться на другой элемент,

Заранее спасибо! Myles

Answer 1

Я звоню в сценарий в голове, если это имеет значение?

Вы не сможете использовать getElementById(), если тело документа даже не было разобрано. Другими словами, вам нужно запустить свой код в функции window.onload или поместить его в самую нижнюю часть вашего тела.

Кроме того, удалите try/catch во время тестирования, это только скроет ошибки.

Answer 2

Вы уверены, что элемент, который вы пытаетесь получить, был загружен в DOM? Вы сказали, что ваш скрипт работает в теге головы (который загружается до остальной части тела). Возможно, ваш скрипт запускается до того, как элемент DOM, который вы ищете, существует, и поэтому он не может его найти, и поэтому он не может его добавить.

Answer 3

Нет гарантии, что HTML-код завершит разбор по времени выполнения JavaScript. Существует несколько способов делать то, что вы хотите, с различными характеристиками производительности.

Вы можете поместить свой код в функцию и назначить его как обработчик события загрузки для объекта window. У этого есть недостаток ожидания, пока все ресурсы для страницы не закончили загрузку, а не только HTML. Это часто замедляет загрузку страниц, так как вам нужно ждать таких вещей, как медленные серверы объявлений и т. Д.

Вы можете поместить свой код в функцию и вызвать ее из нижней части документа.

Вы можете использовать библиотеку JavaScript, такую ​​как jQuery, чтобы выполнить свой JavaScript, когда DOM закончил загрузку. Существует не простой способ сделать это, что работает кросс-браузер, поэтому проще всего не изобретать колесо и просто использовать то, что уже является зрелым решением.