Не гони коней!

Для построения дерева DOM браузеру при загрузке страницы требуется время. Это нужно учитывать при подгрузке контента на страницу с помощью Ajax.
Собственно к чему это я ...
При разработке последнего проекта я взял на себя задачу организовать подгрузку контента на страницу с помощью Ajax. XMLHTTP-соединение успешно устанавливалось, я получал необходимый контент и с помощью innerHTML вставлял его в скрытый блок на странице, чтобы уже оттуда выдергивать необходимые части. И тут я наткнулся на грабли: в ответ на мои запросы getElementById или getElementsByTagName браузер выдавал undefined вместо необходимых мне подгруженных элементов.

Как оказалось, грабли таились в том, что я слишком торопился: с момента вставки полученного контента на страницу и до момента обращения к его элементам браузер не успевал добавлять новые элементы в DOM-дерево страницы. Решение: задать таймаут, тем самым дать браузеру время для построения дерева DOM. А если мы поместим в конец загружаемого контента узел-метку (например, пустой div с id='flag'), то сможем определить закончил браузер свою работу, или нам нужно еще немного подождать.
var hiddenDiv; // скрытый контейнер на странице
var oXmlHttp = createXmlHttp();
oXmlHttp.open("get", url, true);
oXmlHttp.onreadystatechange = function ()
{
if (oXmlHttp.readyState == 4)
{
if (oXmlHttp.status == 200)
{
hiddenDiv.innerHTML = oXmlHttp.responseText;
var t = setTimeout("handle()", 100);
}
}
}
oXmlHttp.send(null);

function handle()
{
if (document.getElementById('flag') != undefined)
{
// Дерево DOM готово, можем разбирать полученный контент по частям
}
else
{
var t = setTimeout("handle()", 100);
}
}

В зависимости от размера получаемого контента следует установить нужный таймаут.

Оригинал статьи