Curs jQuery - Metodele insertBefore si insertAfter

In articolele trecute am utilizat functiile jQuery pentru a realiza selectii.

Acum vom folosi functiile in jQuery pentru a crea noi elemente in structura paginii si pentru a aplica o clasa CSS.

In exemplul de mai jos am inserat in pagina un titlu h2 si un paragraf. Pentru a defini punctul in care noul element va trebui inserat in structura documentului HTML utilizam metodele .insertAfter sau .insertBefore.

In structura paginii avem un div cu id-ul wrap si un titlu h3 cu id-ul titlu. Prin metoda .insertBefore adaugam inaintea div-ului cu id wrap un titlu h2.

Apoi, prin metoda .insertAfter adugam un paragraf dupa titlul h3 cu id-ul titlu. Am adaugat un id tag-ului h3 pentru a putea specifica exact care este tag-ul h3 dupa care inseram paragraful. In absenta specificarii id-ului tag-ului h3 si in cazul in care am avea mai multe tag-uri h3 in pagina, paragraful ar fi inserat dupa fiecare tag h3. Paragrafului ii dam o regula CSS inline direct in interiorul codului jQuery prin folosirea ghilimelelor in interiorul apostroafelor.

Apoi adaugam clasa cu numele „clasa-titlu” (pe care am scris-o in partea de head a documentului) tuturor tag-urilor h3 din pagina.

<head>
<style>
.clasa-titlu {
background-color: #f4f4f4;
padding: 1em;
}
</style>
</head>

<div id="wrap">
<h3 id="titlu">Titlu H3 scris in DOM la care adaugam clasa prin jQuery cu metoda .addClass</h3>
</div>
<script>
$(document).ready(function(){
});
$('<h2>Titlu inserat prin jQuery cu metoda .insertBefore</h2>') .insertBefore('#wrap');
$('<p style="color: brown;">Paragraf inserat dupa H3 prin jQuery cu metoda .insertAfter si cu style inline</p>') .insertAfter('h3#titlu');
$('h3') .addClass('clasa-titlu');
</script>

DEMO

NB: Observam ca pentru inserarea paragrafului si a stilului sau CSS inline am utilizat atat ‘apostroafele’ cat si “glilimelele”. Sintaxa elementelor string o vom analiza pe larg intr-o lectie urmatoare.

Codul de mai sus insereaza deci noi elemente (un titlu h2 si un paragraf) ca si siblings ale tag-ului h3 care era deja prezent in DOM. Acest lucru inseamna ca acestea se gasesc pe acelasi nivel al documentului ca si tag-ul h3.

Daca insa vrem sa integram noul element ca si child in cadrul unui element existent vom utiliza metodele .prependTo sau .appendTo pe care le vom vedea in actiune in articolul urmator.

CUPRINS MINI-CURS JQUERY