[HTML|JS|CSS] jQuery : Manipulowanie modelem DOM

Biblioteka jQuery udostępnia sporo wygodnych metod na potrzeby manipulowania modelem DOM. Poniższe przykłady prezentują możliwości jQuery w tej dziedzinie.

• Ustawianie kodu html wewnątrz danego elementu i jednocześnie odczyt zawartości elementu

$(document).ready(function(){
   $('.container').html('<button>Click</button>');
   alert($('.container').html());
 });

• Dodawanie elementów na początku i na końcu wewnątrz elementu wybranego selektorem

$(document).ready(function(){ 
   $('.container').append('<button>Last</button>');
   $('.container').prepend('<button>First</button>');
 });

• Dodawanie elementów na przed i po elemencie wybranym za pomocą selektora

$(document).ready(function(){
   $('.container').after('<div class="after_container"></div>');
   $('.container').before('<div class="before_container"></div>');
 });

• Usuwanie elementów z modelu DOM wybranych selektorem

$(document).ready(function(){
   $('.container button').first().remove();
 });

• Klonowanie elementów i wklejanie w dowolne miejsce

$('.container button').first().clone().appendTo('.vessel');