Adauga, Sterge elemente HTML cu jQuery

Curs Javascript

• Sterge elemente existente
• Citire si Modificare continut

Cu jQuery se pot usor adauga si sterge elemente HTML in pagina Web, precum si modificarea continutului lor.

Adaugare Elemente noi

Sunt doua modalitati de a adauga noi elemente HTML cu jQuery, se poate crea elementul si apoi sa fie inclus in pagina intr-o locatie specificata, sau se poate adauga direct codul elementului.

1. Creare element HTML si includerea lui

Pentru a crea tag-uri HTML, se foloseste urmatoarea sintaxa:

$('<tag>Continut nou</tag>');

jQuery transforma codul HTML intr-un fragment DOM si-l selecteaza, la fel cum face cu oricare selector; astfel poate fi utilizat in continuare ca si cum ar fi fost preluat din codul HTML.

Ca sa adaugati o clasa CSS la noul obiect HTML, se poate folosi aceasta formula:

$('<tag>Continut nou</tag>').addClass('nume_clasa');

Dupa ce obiectul HTML e creat, poate fi adaugat in pagina, in locatia dorita, folosind urmatoarele functii:

    newElm.insertAfter(tinta)   - adauga newElm in pagina, dupa elementul tinta.
    newElm.insertBefore(tinta)   - adauga newElm in fata elementului tinta.
    newElm.appendTo(tinta)   - include newElm in "tinta" (apare in interiorul "tinta"), la sfarsit, dupa oricare alt continut din "tinta".
    newElm.prependTo(tinta)   - include newElm in "tinta" (apare in interiorul lui "tinta"), la inceput, inaintea oricarui alt continut.
- "tinta" poate fi un selector ce reprezinta un singur element sau mai multe, in acest caz, "newElm" va fi adaugat la tot acel set de elemente.

Exemplu:

<style type="text/css"><!--
.spn { color:blue; font-weight:bold; }
--></style>
<script type="text/javascript"><!--
$(document).ready(function() {
 var new_btn = $('<button id="btn">Click</button>'); // creare button
 var new_span = $('<span>START</span>').addClass('spn'); // creare <span> cu class="spn"

 new_btn.insertAfter('#idd'); // adauga noul buton dupa tag-ul cu id="idd"

 // acum se foloseste noul buton creat cu jQuery, cand e apasat
 $('#btn').click(function() {
 // include "new_span" la inceput in toate DIV-urile cu class="cls"
 new_span.prependTo('div.cls');
 });
});
--></script>

<div class="cls"> Creare si adaugare cod HTML cu jQuery</div>
<div class="cls" id="idd"> marplo.net</div>

Codul de mai sus creaza un <button> si un <span> la care adauga o clasa CSS, adauga butonul in pagina, apoi inregistreaza un eveniment "click" la el, care va adauga tag-ul <span> nou creat in interiorul <div>-urilor cu class="cls", cand butonul e apasat.
Butonul e adaugat in pagina (dupa "#idd") si utilizat ca si cum ar fi fost creat direct in documentul HTML. Noul <span> cu class="spn" primeste proprietatile CSS definite pentru aceasta clasa.
Iata rezultatul, click pe buton:
- Ca sa adaugati un anume atribut (precum id, input, src) cu jQuery, se aplica sintaxa:

Element.attr('numeAtribut', 'valoare');

2. Adaugare directa a codului HTML

Exista mai multe functii jQuery prin care se poate adauga un cod HTML direct in pagina:

    $('selector').after('<tag>Continut nou</tag>')   - adauga "Continut nou" in pagina, dupa "selector".
    $('selector').before('<tag>Continut nou</tag>')   - adauga "Continut nou" in pagina, inainte de "selector".
    $('selector').append('<tag>Continut nou</tag>')   - include "Continut nou" in interiorul "selector", la sfarsit, dupa oricare alt continut.
    $('selector').prepend('<tag>Continut nou</tag>')   - include "Continut nou" in interiorul "selector", la inceput, inainte de oricare alt continut.
- "selector" poate reprezenta un singur element sau mai multe, in acest caz, "Continut nou" va fi adaugat la tot setul de elemente.

In urmatorul exemplu se creaza un efect similar cu primul, dar de aceasta data se folosesc functiile prezentate mai sus. Tag-ul <span> e adaugat la sfarsit (cu append()):

<style type="text/css"><!--
.spn { color:blue; font-weight:bold; }
--></style>
<script type="text/javascript"><!--
$(document).ready(function() {
 $('#idd').after('<button id="btn">Click</button>'); // adauga un nou buton dupa tag-ul cu id="idd"

 // acum se foloseste noul buton, cand e apasat click pe el
 $('#btn').click(function() {
 // include un SPAN cu class="spn" la sfarsit in toate DIV-urile cu class="cls"
 $('div.cls').append('<span class="spn">END.</span>');
 });
});
--></script>

<div class="cls">Adaugare directa cod HTML cu jQuery </div>
<div class="cls" id="idd">marplo.net </div>

Dupa cum se observa, de aceasta data class="spn" este scris direct in tag, fara utilizare addClass().
Demo:

Sterge elemente existente

Pentru a sterge un element cu jQuery, mai intai trebuie selectat (cu un selector), apoi se apeleaza functia remove().
Sintaxa:

$('selector').remove('select');

- "select" - e un parametru optional care specifica si altfel ce sa fie sters.
De exemplu:   $('p.cls').remove();   sterge toate paragrafele cu class="cls" ; la fel si   $('p').remove('.cls');.
Actiunea de stergere va elimina si din DOM acele elemente, de asemenea sterge orice eveniment inregistrat la ele.

Exemplu:

<script type="text/javascript"><!--
$(document).ready(function() {
 // cand tag-ul cu id="btn" e apasat
 $('#btn').click(function() {
 // sterge toate LI cu class="cls" din OL
 $('ol li.cls').remove();
 });
});
--></script>

<ol>
 <li class="cls">Lista cu class="cls".</li>
 <li>Lista fara class.</li>
 <li class="cls">Alt LI cu class="cls".</li>
</ol>
<button id="btn">Sterge</button>

Click pe butonul "Sterge" ca sa vedeti rezultatul (va sterge toate <li> cu class="cls" din <ol>).

Citire si Modificare continut

Ca sa cititi /preluati continutul HTML dintr-un element (similar cu innerHTML in JavaScript), se foloseste aceasta formula:

$('Element').html();

Ca sa obtineti doar continutul text, fara tag-uri HTML, folositi:

$('Element').text();

• Utilizand o formula asemanatoare, dar cu un parametru la html() si text(), se modifica continutul din elementul specificat.
Astfel, ca sa modificati continutul HTML dintr-un element, se aplica sintaxa:

$('Element').html('<tag>Continut nou</tag>');

Pentru a modifica /inlocui cu un text simplu, folositi:

$('Element').text('Un text oarecare');

Ca sa vedeti diferenta dintre text() si html(), incercati acest exemplu:

<script type="text/javascript"><!--
$(document).ready(function() {
 // cand se da click pe tag-ul cu id="btn"
 $('#btn').click(function() {
 // preia continutul din "#div1", cu html(), si text()
 var dv_html = $('#div1').html();
 var dv_text = $('#div1').text();

 // afiseaza valorile intr-o fereastra alert
 alert('html - '+ dv_html+ '\n text - '+ dv_text);

 // modifica continutul din "#div1" si "#div2"
 $('#div1').html('Continut nou, modificat cu <u>html()</u>');
 $('#div2').text('Continut nou, inlocuit cu <u>text()</u>');
 });
});
--></script>

<div id="div1">div1 <b>continut</b>.</div>
<div id="div2">Alt <u>cod HTML</u></div>
<button id="btn">Click</button>

Dupa cum se observa, daca apasati pe butonul de jos, cand se preia continutul cu text(), tag-urile sunt sterse. Cand se adauga un cod HTML, continutul va fi adaugat si afisat asa cum e scris, incluzand si <taguri>.

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.