Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

mateushim

Entendendo prepend(), prependTo(), appeend() e appeendTo() do Jquery

By mateushim, in Javascript

Recommended Posts

mateushim    0

mateushim
Posted

Olá Pessoal

 

Quando comecei utilizar o framework JQuery, cheguei a um certo momente que precisei desenvolver uma aplicação que gerasse um código dinâmicamente, nesse caso DOM com JQuery. Como estava aprendendo JQuery resolvi pesquisar para não precisar misturar código javascript, ai pesquisei... pesquisei até encontrar 4 maneiras, que foram o prepend(), prependTo(), appeend() e appeendTo(). Sendo que uma das minhas dúvidas naquela época era qual utilizar para meu projeto.

 

Nesse Post mostrarei como utilizar e quando utilizar cada um desses métodos:

 

prepend() ( visualizar exemplo )

 

Esse método permite adicionar conteúdo ao INÍCIO de um elemento HTML. Este conteúdo pode ser um seletor, um elemento HTML, uma string HTML ou um objeto jQuery.

 

Exemplo:

<html>
<head>
	<title>Utilizando o método prepend() do Jquery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script src="http-~~-//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

	<script type="text/javascript">
       	$(document).ready(function() {
           	$("#prepend").click(function () {
               	$('.conteudo').prepend("<div class='novo_conteudo'>Novo conteúdo Prepend()</div>");
			});  
		})

	</script>

	<style type="text/css">
           .conteudo { padding:5px; border:1px solid #000; width:200px; height:200px; }
           .novo_conteudo { padding:5px; border:1px solid #F00; width:100px; height:50px; }
       </style>

</head>

   <body>

       <div class="conteudo">Conteúdo Normal</div>

 	<br/>

       <input type="button" name="prepend" id="prepend" value="Executar Prepend()">

</body>
</html>

 

Ao executarmos esse exemplo e clicarmos algumas vezes no botão "Executar Prepend()" veremos que irá inserir o

<div class='novo_conteudo'>Novo conteudo Prepend()</div> acima do Conteúdo Normal, e ao clicarmos em exibir o código fonte o seguinte código será exibido:

<div class="conteudo">
<div class="novo_conteudo">Novo conteudo Prepend()</div>
<div class="novo_conteudo">Novo conteudo Prepend()</div>
Conteudo Normal
</div>

Com o método prepend() o conteúdo sempre será inserido após o <div class="conteudo">.

 

append() ( visualizar exemplo )

 

Esse método permite adicionar conteúdo ao FINAL de um elemento HTML. Este conteúdo pode ser um seletor, um elemento HTML, uma string HTML ou um objeto jQuery.

 

Exemplo:

 

<html>
<head>
	<title>Utilizando o método append() do Jquery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script src="http-~~-//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

	<script type="text/javascript">
       	$(document).ready(function() {
           	$("#append").click(function () {
               	$('.conteudo').append("<div class='novo_conteudo'>Novo conteúdo Append()</div>");
			});  
		})

	</script>

	<style type="text/css">
           .conteudo { padding:5px; border:1px solid #000; width:200px; height:200px; }
           .novo_conteudo { padding:5px; border:1px solid #F00; width:100px; height:50px; }
       </style>

</head>

   <body>

       <div class="conteudo">Conteúdo Normal</div>

 	<br/>

       <input type="button" name="append" id="append" value="Executar Append()">

</body>
</html>

Ao executarmos esse exemplo e clicarmos algumas vezes no botão "Executar Append()" veremos que irá inserir <div class='novo_conteudo'>Novo conteudo Append()</div> abaixo do Conteúdo Normal, e ao clicarmos em exibir o código fonte o seguinte codigo será exibido:

 

<div class="conteudo">
Conteudo Normal
<div class="novo_conteudo">Novo conteudo Append()</div>
<div class="novo_conteudo">Novo conteudo Append()</div>
</div>

 

Com o método append() o conteúdo sempre será inserido antes da </div>.

 

prependTo() ( visualizar exemplo )

 

Esse método é usado quando queremos recortar algum conteúdo da página e colar para dentro de um seletor. Esse conteúdo é inserido no INÍCIO desse seletor. Executado o exemplo abaixo fica mais fácil de se entender.

 

<html>
<head>
	<title>Utilizando o método prependTo() do Jquery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script src="http-~~-//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

	<script type="text/javascript">
       	$(document).ready(function() {
           	$("#prependto").click(function () {
				$(".novo_conteudo").prependTo(".conteudo"); 
			});  
		})

	</script>

	<style type="text/css">
           .conteudo { padding:5px; border:1px solid #000; width:200px; height:200px; }
           .novo_conteudo { padding:5px; border:1px solid #F00; width:100px; height:50px; }
       </style>


</head>

   <body>

       <div class="novo_conteudo">Novo conteúdo prependTo()</div>

       <div class="conteudo">Conteúdo Normal</div>

 	<br/>

       <input type="button" name="prependto" id="prependto" value="Executar prependTo()">

</body>
</html>

 

Ao executarmos esse exemplo, e clicarmos no botão "Executar prependTo()" veremos que irá recortar o conteúdo <div class="novo_conteudo">Novo conteúdo prependTo()</div> e colocar dentro do <div class="conteudo">Conteúdo Normal</div>, ficando: 

<div class="conteudo">
<div class="novo_conteudo">
	Novo conteúdo prependTo()
</div>
Conteúdo Normal
</div>

 

appendTo() ( visualizar exemplo )

 

Esse método é usado quando queremos recortar algum conteúdo da página e colar para dentro de um seletor. Esse conteúdo é inserido no FINAL desse seletor. Executado o exemplo abaixo fica mais fácil de se entender.

<html>
<head>
	<title>Utilizando o método appendTo() do Jquery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script src="http-~~-//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

	<script type="text/javascript">
       	$(document).ready(function() {
           	$("#appendTo").click(function () {
				$(".novo_conteudo").appendTo(".conteudo"); 
			});  
		})

	</script>

	<style type="text/css">
           .conteudo { padding:5px; border:1px solid #000; width:200px; height:200px; }
           .novo_conteudo { padding:5px; border:1px solid #F00; width:100px; height:50px; }
       </style>


</head>

   <body>

       <div class="novo_conteudo">Novo conteúdo appendTo()</div>

       <div class="conteudo">Conteúdo Normal</div>

 	<br/>

       <input type="button" name="appendTo" id="appendTo" value="Executar appendTo()">

</body>
</html>

Ao executarmos esse exemplo, e clicarmos no botão "Executar appendTo()" veremos que irá recortar o conteúdo <div class="novo_conteudo">Novo conteúdo prependTo()</div> e colocar dentro do <div class="conteudo">Conteúdo Normal</div> antes da </div>, ficando: 

<div class="conteudo">
Conteúdo Normal
<div class="novo_conteudo">
	Novo conteúdo prependTo()
</div>	
</div>

 

Espero te ajudado, até a próxima pessoal

 

Para mais conteúdo, acesse meu blog http://mateusgamba.wordpress.com

Share this post

Link to post
Share on other sites
Go To Topic Listing Javascript
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept