Interface construída dinamicamente
O que você está vendo são sites cujas interfaces são total ou parcialmente construídas via JavaScript, ou seja, código que executa no seu navegador.
Geralmente você recebe um HTML bem básico quando acessa a página, mais um conjunto de dados, mais alguns scripts.
Posteriormente, mais dados podem ser carregados ao longo do tempo em requisições assíncronas usando Ajax.
Para que serve
Este tipo de técnica foge um pouco dos padrões da web, sendo geralmente é adotado para melhorar incrementar a experiência do usuário, não fazendo-o esperar pelo carregamento de página após página.
Isso dá a sensação de usar um programa convencional ao invés de um site da web.
Problemas
Por outro lado, desenvolver aplicações web desse tipo é mais trabalhoso e mais propenso a erros.
Exemplos
Single page applications (aplicações de uma única página), pela sua própria natureza, geralmente adotam esse tipo de estratégia.
É o caso, por exemplo, do Gmail. Ele carrega todo o código e estruturas necessárias logo que você o acessa. Depois, você pode realizar uma séria de tarefas sem transferência de dados do servidor.
Nos aplicativos do Google em geral, há inclusive suporte parcial para trabalhar offline.
Como isso é feito na prática
Em geral há duas estratégias para geração dinâmica de elementos:
Criação de elementos programaticamente
Cão criadas instâncias de objetos que representam as tags HTML e então elas são adicionadas em algum lugar da página.
Isso é feito com a função createElement
do JavaScript. Exemplo:
//cria tag <p>
var minhaDiv = document.createElement("p");
//adiciona um texto
var conteudo = document.createTextNode("Olá!");
minhaDiv.appendChild(conteudo);
//adiciona tag na página
document.body.appendChild(minhaDiv);
Criação com base num template HTML
Pode-se também injetar um trecho de código HTML em algum lugar da página.
Isso pode ser feito usando-se o atributo innerHTML
de algum elemento existente na página. Exemplo:
//substitui todo o conteúdo da página por "Olá"
document.body.innerHTML = "Olá";
Há alguma diferença de desempenho entre as duas formas, mas no fim o resultado é o mesmo.