Manipulações do DOM com jQuery - 2
Manipulações do DOM com jQuery - 2
Manipulações do DOM com jQuery - 2 é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 1 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Introdução e append
Olá,
Nos exemplos anteriores, realizamos uma operação de atualização ou leitura em objetos HTML DOM.
Aprenderemos a operação de inserção com o método append().
Vamos analisar um exemplo.
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>append
Depois de executar o código acima, o método append adicionará o código HTML (passado como argumento) ao final do elemento #test.
prepend
método prepend()
O oposto do método append() é o método prepend(). O método append() adiciona o conteúdo ao final do elemento de destino, enquanto prepend o adiciona no início.
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>pergunta
Com os métodos append e prepend, conseguimos adicionar novos elementos HTML ao final e ao início do elemento-alvo.
Mas como fazemos para adicioná-lo como irmão do elemento-alvo?
exemplo
Vamos continuar o exemplo anterior.
Nosso nó HTML no primeiro caso é o seguinte.
<div id="test">
<p>initial paragraph</p>
</div>métodos after - before
métodos after() e before()
Podemos adicionar elementos HTML antes e depois do elemento-alvo com os métodos after() e before() .
No código de exemplo abaixo, um novo elemento foi adicionado ao elemento com o identificador #test, imediatamente antes e depois dele na hierarquia de elementos irmãos.
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
inserção múltipla
Até agora, vimos os métodos prepend(), append(), before() e after(). Esqueci-me de explicar um assunto. Desculpe, às vezes posso ser esquecid(a) 😇.
Então, o que fazemos se quisermos adicionar mais de um nó ao mesmo tempo?
Como no exemplo abaixo,
podemos adicionar mais de um nó ao mesmo tempo passando mais de um argumento aos métodos correspondentes.
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>exemplo de encadeamento
No exemplo acima, mais de um nó foi adicionado ao mesmo tempo. Como pode ver, a sintaxe será a mesma mesmo quando eles estiverem em métodos diferentes.
Além disso, podemos escrever código em jQuery fazendo alterações.
Assim, podemos escrever um código mais curto e eficiente.
Vamos analisar o exemplo e aprender a escrever código encadeado em jQuery.
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>método wrap
método wrap()
Qual método usaremos se quisermos colocar o elemento HTML dentro de outro contêiner?
É claro: o método wrap() .
O exemplo a seguir mostra um uso simples do método wrap.
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
método unwrap
método unwrap()
Temos o método oposto ao método wrap(). Com o método unwrap(), podemos excluir o elemento-pai de um elemento-alvo.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();método empty
método empty()
Vamos analisar a exclusão em elementos HTML.
Com o método empty(), podemos excluir todos os elementos filhos e descendentes de um elemento-alvo.
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();método remove()
método remove()
O método remove() remove do DOM não apenas os descendentes do elemento, mas também o próprio elemento.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Parabéns
Parabéns 🎉
aprendemos as manipulações do DOM.
Na próxima seção, aprenderemos a aplicar estilos com jQuery.
Perguntas Frequentes
A aula “Manipulações do DOM com jQuery - 2” é grátis?
Sim — o texto completo de “Manipulações do DOM com jQuery - 2” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 1 aulas no total.
O que vou aprender em “Manipulações do DOM com jQuery - 2”?
Manipulações do DOM com jQuery - 2 Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.
Quanto tempo leva a aula “Manipulações do DOM com jQuery - 2”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.