4.4 Manipulação dinâmica do DOM

4.4 Manipulação dinâmica do DOM Funções para alteração dinâmica do DOM, seja removendo, adicionando ou alterando a hierarquia de elementos da árvore do document object model.

 

A função wrap()

Esta função envolve um elemento com outra tag. No código abaixo, toda vez que o button recebe um clique, a função wrap() envolve o mesmo com uma div:

<!DOCTYPE html>

<html lang="pt">

<head>

<style>

div{border: 1px solid black;padding:20px;}

</style>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#bto").click(function(){

$(this).wrap("<div></div>");

});

});

</script>

</head>

<body>

<button id="bto">Wrap this!</button>

</body>

</html>

O elemento div será criado dinamicamente e adicionado ao DOM, ao entorno do button nesse caso.

 

Funções insertBefore e insertAfter

A função insertBefore permite anexar um elemento no DOM, exatamente antes de um determinado elemento. A função insertAfter faz o oposto, ela permite anexar um elemento logo depois de um determinado elemento. No exemplo a seguir, temos dois botões. O primeiro insere um elemento p, criado dinamicamente, antes do elemento #menu. O segundo botão insere um elemento p, depois do elemento #menu:

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<style>

div, p{border:1px solid black;margin:10px;}

#menu{background-color:lightgreen;}

</style>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#insertB").click(function(){

$("<p>elemento inserido antes</p>").insertBefore("#menu");

});

$("#insertA").click(function(){

$("<p>elemento inserido depois</p>").insertAfter("#menu");

});

});

</script>

</head>

<body>

<button id="insertB">InsertBefore P</button>

<button id="insertA">InsertAfter P</button> <h1>Título principal</h1>

<div id="menu">Porções: arroz, batata frita</div>

<div id="artigos">Conheça mais sobre culinária</div>

</body>

</html>

 

Função replaceWith

Esta função substitui um elemento por outro. No exemplo a seguir, quando o button #trocar é pressionado, a div "#content" é substituída por um parágrafo. O novo elemento é passado como parâmetro na função replaceWith. Depois que o replaceWith é executado, a div content não existirá mais na árvore DOM. O replaceWith pode ser visto também como a execução de duas operações: (1) remove a div e (2) adiciona o novo elemento.

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<style>

div,p{border:1px solid black;

margin:10px;background-color:yellow;

}

p{background-color:lightgreen;}

</style>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#trocar").click(function(){

$("#content").replaceWith("<p>Novo conteudo!</p>");

});

});

</script>

</head>

<body>

<button id="trocar">ReplaceWith p</button>

<div id="content">Conteúdo da div sobre alguma coisa

importante.</div>

</body>

</html>

 

A função clone()

Esta função, como o próprio nome já diz, faz um clone ou uma cópia de determinado elemento. Às vezes, criar seu próprio elemento usando apenas o jQuery pode ser muito trabalhoso, ainda mais se este elemento possui diversos nodos filhos. É o caso do código abaixo, onde sempre que o usuário clica no botão "Novo campo", uma nova linha na tabela é inserida. Se fossemos criar esta linha manualmente, precisaríamos criar 3 inputs, depois anexá-las a 3 <td>s e depois anexá-las a <tr>. Isso acaba sendo muito trabalhoso. A alternativa aqui é usar a função clone, onde apenas especificamos o elemento a ser copiado e a função retorna um novo elemento, independente do elemento original. Depois disso, basta anexá-lo num ponto da árvore DOM:

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<style>

tr:nth-child(even){

background-color: blue;

}

</style>

<script>

var newTR;

$(document).ready(function(){

$("#cloneButton").click(function(){

newTR = $("#notas tbody tr:first").clone();

newTR.children().children().val("");

$("#notas tbody").append(newTR);

});

});

</script>

</head>

<body>

<button id="cloneButton">Novo campo</button>

<table id="notas">

<thead>

<tr>

<th>Nome</th>

<th>Nota 1</th>

<th>Nota 2</th>

</tr>

</thead>

<tbody>

<tr>

<td><input type="text" name="nome"/></td> <td><input type="number" name="n1" step="any"

min="0" max="10"/>

</td>

<td><input type="number" name="n2" step="any"

min="0" max="10"/>

</td>

</tr>

</tbody>

</table>

</body>

</html>

Uma observação importante quando se trabalha com a função clone: cuidado ao clonar elementos que possuem um id. Neste caso, ou você não usa id, optando pelo uso de classes, ou antes de anexar o elemento clonado você altera o id desse elemento. Lembre-se que esta é uma regra importante do HTML e que se, não respeitada, poderá comprometer a funcionalidade do jQuery e do JavaScript e o seu script não terá o resultado esperado.

A função load()

Esta função carrega dados do servidor e os anexam diretamente em um elemento HTML. No exemplo abaixo, a função load() carrega o conteúdo do arquivo "roteiros.txt" e o anexa ao elemento #lista. A função load é um tipo de chamada ajax. Para conseguir testar esta função é necessário que a mesma esteja dentro de um servidor web como, por exemplo, o apache.

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<style>

ul{font-family:monospace;}

button{display:block;margin: 20px 0px;}

</style>

<script>

$(document).ready(function(){

$("#prox").click(function(){

$("#lista").load("roteiros.txt");

});

});

</script>

</head>

<body>

<h4>Melhores destinos</h4>

<button id="prox">Carregar lista</button> <ul id="lista">

</ul>

</body>

</html>

 

A função ajax()

Esta função permite gerar requisições do tipo GET ou POST para um servidor de forma assíncrona, isto é, sem a necessidade de bloquear a interface do usuário até o retorno da resposta. Para fazer uma chamada assíncrona precisamos definir alguns parâmetros:

url : define o endereço da página ou arquivo a ser requisitado.

context : define o elemento que será vinculado à requisição, geralmente aquele que receberá os dados retornados pelo servidor.

type : define qual o método de requisição que será utilizado, geralmente GET ou POST.

success : define a função callback, que é executada após a resposta do servidor.

Abaixo temos um exemplo de requisição assíncrona que solicita o arquivo tabela.txt, sem bloquear a navegação do usuário. Caso a resposta seja confirmada (com sucesso), uma função anônima é declarada, cujo parâmetro data encapsula os dados retornados pelo servidor. Nesse caso, a operação se completa fazendo um append() desses dados ao elemento #lista.

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<style>

ul{font-family:monospace;}

button{display:block;margin: 20px 0px;}

</style>

<script>

$(document).ready(function(){

$("#carregar").click(function(){

$.ajax({

url: "tabela.txt",

context: $("#lista"),

type: "GET",

success: function(data){

this.append(data);