4 Navegação e inserção de elementos no DOM

4 Navegação e inserção de elementos

no DOM

4.1 Criando novos elementos com jQuery Para criar um novo elemento HTML usando ojQuery basta chamar a função jQuery ou seu álias $ e passar uma string como parâmetro. Por exemplo, vamos criar um novo parágrafo e associar uma classe CSS, para depois anexá-lo ao documento HTML:

<!DOCTYPE html>

<html>

<head>

<title>Criando elementos</title>

<meta charset="utf-8"/>

<style>

body{

padding-top: 20px;

}

p.destaque{

border: 1px solid red;

}

</style>

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

<script>

$(document).ready(function(){

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

// cria o parágrafo:

var p = $("<p>Novo parágrafo criado!</p>"); // associa a classe destaque ao parágrafo:

p.addClass("destaque");

// anexa o parágrafo:

$("#site").append(p);

});

});

</script>

</head>

<body>

<div id="site">

<button id="criar">Criar parágrafo</button>

</div>

</body>

</html>

Vamos detalhar o código acima. O comando abaixo cria o parágrafo e salva este elemento numa variável p:

var p = $("<p>Novo parágrafo criado!</p>");

A seguir associamos a classe destaque ao parágrafo recém criado. Até aqui este parágrafo ainda não existe no DOM:

p.addClass("destaque");

O último passo consiste em anexar o parágrafo àárvore DOM. Para isso precisamos escolher um nó pai e anexá-lo nesse ponto. O comando abaixo faz exatamente isso, escolhemos o nó pai, no caso a div #site e usamosa função append() para anexar o parágrafo à div:

$("#site").append(p);

Criando um elemento customizado

À medida que você se familiariza com o funcionamento do jQuery para criar novos elementos, talvez você comece a se perguntar sobre formas de ter mais controle sobre a criação de novos elementos. Por exemplo, como posso definir um id, um texto para o elemento recém criado ou como associar um evento? A função jQuery permite fazer isso:

<script>