And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Chris Benseler

[www]

Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos

Status
Karma: 15312
Opiniões: 30

Mais deste autor


Usando a prototype - passo 5 - criando elementos

Usando a prototype - passo 5 - criando elementos

Muito bomEste texto foi classificado como Muito bom
Em Internet, Programação
Por Chris Benseler
30 de Novembro de 2008

Como criar elementos html usando a prototype

RSS Acompanhe O Desenvolvedor por Feeds!


Como fazer para criar elementos html via javascript?

Usando o padrão do javascript, esse é o código para criar uma div e um link, com atributos, e inserir o link na div:

var div = document.createElement("div");
div.setAttribute("id", "minha_div");
div.className = "minha_classe";
var a = document.createElement("a");
a.setAttribute("id", "meu_link");
a.setAttribute("href", "meu_link.htm");
a.setAttribute("title", "meu título");
a.className = "minha_classe_link";
a.innerHTML = "link!";
div.appendChild(a);

 

Com a prototype, é possível usar uma sintaxe mais amigável; existe a classe Element. Com ela, você pode criar um elemento da seguinta forma:

new Element(tag[, {atributos}]);

O código acima ficaria da seguinte forma:

var div = new Element("div", {id:"minha_div", "class":"minha_classe"});
var a = new Element("a", {id: "meu_link", "class":minha_classe_link", href:"meu_link.htm", title:"meu título"}).update("link!");
div.update(a);

Simples e fácil!

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: prototype, criar-elemento

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 1 + 5?




web tracker