Desenvolvimento - Javascript

Trabalhando com inserção de conteúdo com jQuery

Veja neste artigo quais são e como utilizar as funções nativas da biblioteca jQuery para obter e inserir conteúdo em elementos da página, utilizando uma estrutura simples e de fácil compreensão.

por Joel Rodrigues


Neste artigo, conheceremos as funções da biblioteca jQuery para inserir conteúdos em elementos da página. Veremos, através de exemplos práticos, o quão simples é obter o conteúdo de um determinado elemento, bem como inserir algo em seu interior ou inserir um controle em outro.

Ao longo deste artigo, veremos alguns exemplos, nos quais utilizaremos a estrutura HTML constante na Listagem 1.

Listagem 1: Estrutura HTML utilizada nos exemplos

<DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	$(function(){
		//Aqui devem ser inseridos os códigos a seguir
	})
	</script>
</head>
<body>
	<div id="divPrincipal">
		<span>Texto inicial</span>
	</div>
	<button id="btnTeste">Testar</button>
</body>
</html>

Vejamos então as funções que são o foco desta publicação.

append()

Esta função insere um conteúdo (recebido como parâmetro) no formato HTML ao final de um controle alvo. De fato não há restrições à inserção de texto puro utilizando este método, mas por questão de lógica e padronização, todo conteúdo de uma página web deve estar no formato HTML ou equivalente.

A função é chamada como se fosse um método pertencente ao objeto selecionado, no qual é inserido o conteúdo passado como parâmetro. Na Listagem 2 vemos um exemplo de utilização do append, onde inserimos uma tag de título à divPrincipal ao clicar no botão btnTeste.

Listagem 2: Exemplo de uso do append

$("#btnTeste").click(function(){
	$("#divPrincipal").append("<h1>Título</h1>");
});

Note que o título H1 foi inserido logo após o SPAN já contido na div.

appendTo()

O appendTo tem funcionamento semelhante, porém, no sentido inverso ao anterior. Nesta função, um elemento é selecionado e inserido em um alvo, cuja identificação é passada como parâmetro.

Vendo o exemplo da Listagem 3, fica mais fácil de compreender o funcionamento do método. Ao clicar no botão btnTeste, o próprio será inserido na divPrincipal.

Listagem 3: Exemplo de uso do appendTo

$("#btnTeste").click(function(){
	$(this).appendTo("#divPrincipal");
});

Pode-se também inserir um conteúdo qualquer ao elemento alvo, basta definir este conteúdo no seletor jQuery. Por exemplo, para obter o mesmo resultado da Listagem 2, poderíamos usar $(“<h1>Título</h1>”).appendTo(“#divPrincipal”), porém, por questão de organização e, aconselha-se utilizar o append nessas situações.

prepend()

O funcionamento do prepend é semelhante ao append em termo de estrutura, porém o conteúdo é inserido no início do elemento alvo do método. Utilizaremos o mesmo exemplo do append, mas veremos que o título H1 é inserido antes do SPAN que já se encontra na divPrincipal.

Listagem 4: Exemplo de uso do prepend

$("#btnTeste").click(function(){
	$("#divPrincipal").prepend("<h1>Titulo</h1>");
});

prependTo()

Como se pode imaginar, o prependTo funciona de forma semelhante ao appendTo, com a diferença de que o conteúdo é adicionado ao início do conteúdo do elemento alvo. Da mesma forma que na função anterior, utilizaremos o mesmo exemplo da Listagem 3, usando o prependTo.

Listagem 5: Exemplo de uso do prependTo

$("#btnTeste").click(function(){
	$(this).prependTo("#divPrincipal");
});

html()

A função html tem dois usos distintos. Pode-se usá-la para obter o conteúdo em HTML de um determinado elemento ou para definir esse conteúdo. Na primeira forma, basta que o método seja invocado

sem a passagem de parâmetros. No segunda, deve-se passar o conteúdo total do elemento.

No exemplo a seguir, o conteúdo da divPrincipal é recuperado e atribuído a uma variável, que é exibida na tela. Em seguida, substituímos o código no interior da divPrincipal por um título H3.

Listagem 6: Exemplo de uso do html

$("#btnTeste").click(function(){
var conteudo = $("#divPrincipal").html();
	alert(conteudo);
	$("#divPrincipal").html("<h3>Novo conteudo</h3>")
});

Após a execução do código acima, deverá constar na div apenas uma tag H3 com o texto “Novo conteúdo”.

text()

Da mesma forma que a função html, o text pode ser usado das mesmas duas formas. Porém, o resultado desta função é o texto combinado de todos os elementos constantes no interior do elemento alvo, sem as tags HTML.

Seguindo a mesma lógica, caso se passe como parâmetro para esta função uma tag HTML, esta não será renderizada pelo browser e será exibida na tela tal qual foi informada.

Utilizaremos a mesma estrutura da Listagem 6, substituindo a função html por text para vermos o resultado.

Listagem 7: Exemplo de uso do text

$("#btnTeste").click(function(){
	var conteudo = $("#divPrincipal").text();
	alert(conteudo);
	$("#divPrincipal").text("<h3>Novo conteudo</h3>")
});

O resultado exibido no alert será “Texto inicial”, sem as tags SPAN e, ao final do código, a divPrincipal deverá conter exatamente o texto passado como parâmetro, incluindo as tags H3 que serão exibidas como texto puro.

Conclusão

Como se pôde ver neste artigo, a biblioteca jQuery fornece várias funções para inserir e obter o conteúdo de um elemento na página, de forma simples e rápida.

Espero que o conteúdo aqui apresentado possa ser útil no auxílio aos desenvolvedores web que utilizam esta poderosa biblioteca.

Um grande abraço e até a próxima publicação.
Joel Rodrigues

Joel Rodrigues - Técnico em Informática - IFRN Cursando Bacharelado em Ciências e Tecnologia - UFRN Programador .NET/C# e Delphi há quase 3 anos, já tendo trabalhado com Webservices, WPF, Windows Phone 7 e ASP.NET, possui ainda conhecimentos em HTML, CSS e Javascript (JQuery).