20 Junho 2007
Criando elementos html dinamicamente
Para trabalhar com elementos HTML criados dinamicamente é utilizado o comando: document.creatElement(tag)
Uma coisa que você precisa saber antes de seguir fazendo o seu aplicativo é que para funcionar, é necessário que todo o código HTML já tenha sido carregado na página. Use sempre em funções.
Vamos direto ao assunto.
Primeiro criamos o elemento e guardamos em uma variável:
Agora precisa incluir esse elemento em um ponto da página. Como estamos criando uma Div flutuante, vou colocá-la no body.
Vamos atribuir um Id para o novo elemento:
Pronto, só isso e já temos a função montada. Agora vamos ver isso numa função para que possamos aplicar uma ação na página:
Veja um exemplo usando essa função: clique aqui
Veja outro exemplo com um pouco mais de animação e eventos: Pop-up Javascript
Uma coisa que você precisa saber antes de seguir fazendo o seu aplicativo é que para funcionar, é necessário que todo o código HTML já tenha sido carregado na página. Use sempre em funções.
Vamos direto ao assunto.
Primeiro criamos o elemento e guardamos em uma variável:
//Criando o elemento
var divNova = document.createElement("div");
Agora precisa incluir esse elemento em um ponto da página. Como estamos criando uma Div flutuante, vou colocá-la no body.
//appendChild adiciona o novo elemento no body
document.body.appendChild(divNova);
Vamos atribuir um Id para o novo elemento:
//setAttribute() pode ser usado com
//outras propriedades (como style)
divNova.setAttribute('id','novoElemento');
Pronto, só isso e já temos a função montada. Agora vamos ver isso numa função para que possamos aplicar uma ação na página:
function criaNovoElemento(tipo, id, estilo){
//Criando o elemento
var divNova = document.createElement("div");
//appendChild adiciona o novo elemento no body
document.body.appendChild(divNova);
//atribuindo um estilo caso exista
divNova.className = estilo;
//id do elemento
divNova.setAttribute('id',id);
}
Veja um exemplo usando essa função: clique aqui
Veja outro exemplo com um pouco mais de animação e eventos: Pop-up Javascript
Marcadores: create, dinâmico, div, element, popup
Assinar Postagens [Atom]