O Javascript é executado de cima para baixo, a menos que você especifique o contrário, o código Javascript não esperará até que a página seja carregada antes de ser executado. Por exemplo, uma página da web contém o seguinte código HTML:
Copie o código do código da seguinte forma:
<div id="ele">bem-vindo ao www.VeVB.COm</div>
Se você adicionar o seguinte código Javascript antes desta linha de código HTML:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
document.getElementById('ele').innerHTML= 'bem vindo ao meu blog';
</script>
Execute a página e você receberá esta mensagem de erro: "document.getElementById('ele') is null." O motivo é que quando o javascript acima é executado, não há nenhum elemento DOM com o ID 'ele' na página.
Existem duas soluções:
1. Coloque o código javascript após o código HTML:
Copie o código do código da seguinte forma:
<div id="ele">bem-vindo ao www.VeVB.COm</div>
<script type="texto/javascript">
document.getElementById('ele').innerHTML='bem-vindo ao meu blog';
</script>
2. Aguarde até que a página da web seja carregada e execute o código javascript. Você pode usar a solução tradicional (load): primeiro adicione o corpo HTML e adicione "<body load="load()">," e então chame o código javascript acima na função load(). O que quero focar aqui é usar jQuery para alcançar:
Copie o código do código da seguinte forma:
<roteiro>
$(documento).ready(function(){
document.getElementById('ele').innerHTML= 'bem vindo ao meu blog';
});
</script>
//Claro, como o jQuery é usado, a maneira mais simples de escrevê-lo é:
<roteiro>
$(documento).ready(function(){
$('#ele').html('bem-vindo ao meu blog'); //O método .text() também está disponível aqui.
});
</script>
Você pode colocar o código jQuery acima em qualquer lugar da página e ele sempre esperará até que a página seja carregada antes de executar.