Cu jQuery se pot usor adauga si sterge elemente HTML in pagina Web, precum si modificarea continutului lor.
$('<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.
$('<tag>Continut nou</tag>').addClass('nume_clasa');
<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"> www.discant.ro</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.
Element.attr('numeAtribut', 'valoare');
<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">www.discant.ro </div>Dupa cum se observa, de aceasta data class="spn" este scris direct in tag, fara utilizare addClass().
$('selector').remove('select');- "select" - e un parametru optional care specifica si altfel ce sa fie sters.
<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>).
$('Element').html();
$('Element').text();
$('Element').html('<tag>Continut nou</tag>');
$('Element').text('Un text oarecare');
<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>.