Posted on: January 29, 2020 12:18 PM
Posted by: Renato
Categories: front-end
Views: 695
botão bootstrap add dinamico
Entendendo prepend(), prependTo(), appeend() e appeendTo() do Jquery
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()
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 oNovo conteudo Prepend()acima do Conteúdo Normal, e ao clicarmos em exibir o código fonte o seguinte coóigo será exibido:Novo conteudo Prepend()Novo conteudo Prepend()Conteudo NormalCom o método prepend() o conteúdo sempre será inserido após o.
append()
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á inserirNovo conteudo Append()abaixo do Conteúdo Normal, e ao clicarmos em exibir o código fonte o seguinte codigo será exibido:Conteudo NormalNovo conteudo Append()Novo conteudo Append()Com o método append() o conteúdo sempre será inserido antes da.
prependTo()
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údoNovo conteúdo prependTo()e colocar dentro doConteúdo Normal, ficando:
<div class="conteudo">
<div class="novo_conteudo">
Novo conteúdo prependTo()
</div>
Conteúdo Normal
</div>
appendTo()
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údoNovo conteúdo prependTo()e colocar dentro doConteúdo Normalantes da , ficando:
Espero te ajudado, até a próxima pessoal
<div class="conteudo">
Conteúdo Normal
<div class="novo_conteudo">
Novo conteúdo prependTo()
</div>
</div>
- https://jsfiddle.net/cpdrenato/1ghwad46/
- https://stackoverflow.com/questions/38091406/dynamically-populating-input-text-boxes-and-removing-them-using-jquery
Renato Lucena - 2019
Donate to Site
Renato
Developer