Не гони коней! вторник
9 сентября

При разработке последнего проекта я взял на себя задачу организовать подгрузку контента на страницу с помощью 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);
  }
}

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