Home
índice
Página anterior

"Sistema Solar". Clique na imagem para ver a mensagem

Clique para ver a imagem

Manipulação DOM
Criar Elementos

Para acessar um elemento img existente no código, basta utilizar o construtor da jQuery passando o seletor img.

• Para criar um novo elemento img

A tag span está sendo usada como botão, para manipular jQuery.

No Html:
<span>Clicar para Executar jQuery</span>

Para adicionar à árvore Dom um novo elemento, coloca-se a tag do elemento, nesse caso <img/> (Tag de criação de um elemento img dentro do Html). Coloca-se a imagem dentro de uma variável e para adicionar a imagem dentro do documento, recupera-se o documento, assim: $("p").append(img); //nesse caso a imagem foi colocada dentro da tag <p>.
Pode-se usar a tag body também. $("body").append(img);

	No javaScript:
	$(document).ready(function(){
	$("span").click(function(){
	    var img = $("<img/>",{src:"/static/img/sistema-solar-tres.jpg"});
		$("p").append(img);
	});
	});
	Resultado: ao ser clicado o botão a imagem aparece.
        

• Adicionando Parâmetros à Imagem

No javaScript:	
	$(document).ready(function(){
	$("span").click(function(){
	var img = 
	  $("<img/>",{
	  src:"/static/img/sistema-solar-tres.jpg",
	  title:"Sistema Solar",
	  click:function(){alert("A Nasa já descobriu outros planetas e está investigando se existem vida inteligente fora da terra.");}
	  });
	  $("p").append(img);
	});
	});