Cautare in site

Articol

Curs jQuery – lectia 11 – metodele prependTo si appendTo

Curs jQuery – lectia 11 – metodele prependTo si appendTo

In articolul trecut am vazut cum putem insera noi elemente in structura DOM cu ajutorul metodelor jQuery .insertAfter si .insertBefore. Am vazut ca acestea creaza elemente sibling care vor fi deci plasate pe acelasi nivel in DOM ca si elementul dupa sau inaintea caruia este inserat.

Cu metodele prependTo si appendTo in schimb vom insera elementele noi ca si child al elementului existent.

Pentru a exemplifica aceste functii vom insera in documentul nostru o lista si vom adauga inaintea fiecarui tag li un element decorativ pentru a obtine aceasta configurare: DEMO

lista-jquery-prependTo

In primul rand inseram lista:

<div id="wrap">
<h3>Adaugarea de noi elemente child la DOM utilizand jQuery cu ajutorul functiilor prependTo si appendTo</h3>
<ul>
<li>elementul 1</li>
<li>elementul 2</li>
<li>elementul 3</li>
<li>elementul 4</li>
<li>elementul 5</li>
</ul>
</div>

Apoi prin CSS vom elimina formatarea automata a listei prin aceasta simpla regula:

li {
list-style-type: none;
}

Ca si element decorativ vom utiliza simbolul ASCII “»” (care se obtine de la tastatura cu urmatoarea combinatie de taste alt+shift+1)

Astfel vom avea urmatorul script jQuery in care am inserat simbolul » in interiorul tag-ului span si l-am formatat cu o culoare albastra si cu o dimensiune de 25 de pixeli: DEMO

$(document).ready(function(){
$('<span style= "color: #239dbc; font-size: 25px;">» <span/>').prependTo('li');
});

Cu aceasta formulare vom regasi simbolul » inaintea fiecarui tag li din documentul nostru. Daca vrem sa particularizam aplicarea sa pentru a insera acest simbol numai inaintea elementelor li dintr-un div anume din pagina noastra atunci vom adauga inaintea selectorului li numele selectorului div in acest mod:

$(document).ready(function(){
$('<span style= "color: #239dbc; font-size: 25px;">» <span/>').prependTo('#wrap li');
});

Astfel inserand o lista in afara div-ului cu id wrap vom obtine o lista simpla, fara formatarea data listei din interior.

Metoda .prependTo adauga deci elemente inaintea selectorului. Pentru a adauga un element dupa selector vom utiliza metoda .appendTo.

Pagina DEMO a acestui articol


CUPRINS MINI-CURS JQUERY

  1. Introducere la jQuery, download / CDN si plasare in documentul HTML
  2. Alias-ul, semantica instructiunilor si inserarea lor in documentul HTML
  3. Instructiunea Document Ready in jQuery si specificarea selectorilor
  4. Selectorii :even si :odd si functia .css
  5. Proprietati multiple cu functia .css utilizand un obiect “literal”
  6. Manipularea vizibilitatii cu .addClass si .removeClass
  7. Evenimentele in jQuery, instructiunile .show / .hide sau .toogle
  8. Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toogle in jQuery
  9. Selectorul :hidden – aplicarea functiei .toogle asupra unui element initial ascuns
  10. Adaugarea si plasarea elementelor in DOM cu ajutorul functiilor .insertAfter si .insertBefore
  11. Adaugarea elementelor child in DOM cu ajutorul functiilor .prependTo si .appendTo


Nu sunt comentarii

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.