JQuery Html Elemanını Ekleme ve Kaldırma

JQuery ile web sayfasına yeni html elemanları ve içerik ekleyebiliriz. Bu amaçla kullanabileceğimiz 4 metottan bahsedelim:

prepend() – Belirtilen html elemanının baş kısmına içerik eklenmesini sağlar.
append() – Belirtilen html elemanının son kısmına içerik eklenmesini sağlar.
before() - Belirtilen html elemanından önce içerik eklenmesini sağlar.
after() - Belirtilen html elemanından sonra içerik eklenmesini sağlar.

Örnek olarak sayfanın en başına yeni bir paragraf ekleyelim:

$("body").prepend("<p><b>Paragraf eklendi.</b></p>");

Sayfanın sonuna ise prepend yerine append metodu ile ekleyebiliriz:

$("body").append("<p><b>Paragraf eklendi.</b></p>");

Ol - sıralı listenin sonuna yeni satır ekleyelim:

$("#listem").append("<li><b>Satır eklendi.</b></li>");

Bir div elemanından önce paragraf ekleyelim:

$("#kutu1").before("<u>Kutu1 öncesi</u>");

JQuery Html Elemanını Kaldırma

JQuery ile web sayfasına yeni elemanlar ekleyebildiğimiz gibi, sayfadaki elemanları kaldırabiliriz de.

Bir etiketi tüm içeriği ile birlikte tamamen kaldırmak için remove, etiketin sadece içeriğini kaldırmak içinse empty metodu kullanılır.

Örneğin kutu1 isimli div elemanını tamamen kaldıralım:

$("#kutu1").remove();

Kutu1’in sadece içeriğini kaldıralım:

$("#kutu1").empty();

Remove metodu içerisinde istenirse parametre kullanılarak, aynı etiketten hangilerinin kaldırılacağı belirtilebilir.

Örnek: Sayfamızda bazı p etiketlerine “uyari” class’ı uygulanmış olsun. Bu p etiketlerinin kaldırılmasını şu şekilde sağlayabiliriz:

$("p").remove(".uyari");