Dica Web: Lendo conteúdo (muito) específico com Ajax

Você sabia que, com jQuery, você pode, não apenas ler o conteúdo de uma URL, mas também de um seletor CSS específico dentro dessa URL? Veja como:

$('div#box').load('arquivoExterno.html div#destaque');

Dessa forma o jQuery procura dentro do "arquivoExterno.html", o conteúdo da div#destaque e o coloca dentro da página atual, na div #box.

Mas, e se essas duas páginas forem muito semelhantes e possuírem tanto a div de origem, quanto a de destino com mesmo id?

$('div#box').load('arquivoExterno.html div#box');

O resultado seria uma bagunça:

<div id="box">
   <div id="box>
       <!-- Conteúdo... -->
   </div>
</div>

E caso esta ação se repita, irá gerar ainda mais bagunça e erros no seu código.

Para solucionar este problema, basta pegar apenas o conteúdo da div externa, como abaixo:

$('#box').load('arquivoExterno.html div#box > *');