jQuery Append Kullanımı
jQuery Append Kullanımı : Belirtilmiş HMTL elementlerinin hemen sonuna komut içinde belirlenmiş içerikleri eklemek için kullanılan jQuery fonksiyonudur. Bu fonksiyonun kullanımı jQuery kullananlar için oldukça geniştir. Append fonksiyonunun kullanım alanlarını sizlerle aşağıda paylaşıp örneklerini açıklamalı bir şekilde paylaşacağım ama bundan önce sizlerle paylaşmak istediğim önemli bir kaç kural var.
jQuery Append fonksiyonu çalışabilmesi için Web sayfanızın fonksiyon kullanımının olduğu sayfa içinde jQuery kütüphanesini çağırmanız gerekmektedir. Kütüphane çağırma işlemi oldukça basittir. Sizlerle bu Kütüphanenin nasıl çağıracağınızı örnekli bir şekilde göstereceğim. Body etiketinin hemen başlangıcında veya bitiş etiketinin hemen önüne yazmanızı önermekteyim.
Örnek:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
jQuery Append Kullanım Alanları
jQuery Append kullanım alanları olan bir kaç yeri sizinle aşağıda maddeler halinde paylaşmak istiyorum. Bu alanların bir çoğunu siz de muhtemelen biliyorsunuzdur.
- Bir tıklama veya harekete göre tetiklenip bir div sonrasına bir yazı ekleme yapmak.
- Kullanıcı ekleme işlemleri yapmak için kullanılabilir.
- Otomatik tablo ekleme işlemleri yapmak için kullanılır.
- Sayfa içinde izinleri tanımlamak için veya ekleme yapmak için kullanılır.
jQuery Append kullanımı geniş bir şekilde açabilirsiniz. Bu yaptığınız projeye ve işe göre de değişebilecek unsurlar olduğu için sadece size bir kaç örnek verebilirim. Onun dışında bu konuyla alakalı sizin yaratıcılığınıza kalmış alanlar vardır.
jQuery Append Örnekleri
jQuery Append örneklerini yapmadan önce size bir kaç uyarıda bulunmak istiyorum kodunuzun çalışması için jQuery include(kütüphanesi) çağrılmış olması gerekmektedir. Bunu da yukarıda açık bir şekilde belirttim.
Örnek:
$( ".kutu" ).append( "<p>Yeni Yazı</p>" );
Açıklama: Yukarıdaki örnekte oldukça basit bir işlem yaptım. Kutu sınıfının içine yeni yazı içeriğini otomatik olarak ekledim.
Örnek:
$( "p" ).append( "<b>Hoşgeldiniz</b>" );
Açıklama: Bu kodda ise <p> etiketinin içine sayfa yüklendikten hemen sonra “Hoşgeldiniz” yazısının eklenmesini sağlıyorum.
Tıklama Örneği:
Diğer append örneklerininden farklı bir tıklama olayı ile ekleme yapan bir kod yazmak istiyorum ve sizinle bunu paylaşmak istiyorum.
Örnek:
$(".buton").click(function(){
$( "p" ).append( "<b>Hoşgeldiniz</b>" );
});
Açıklama: buton etiketine tıklama olayı ile tetikle yaparak içindeki append kodunu tetikleyen bir kod yazdım. Aynı zamanda başka bir tıklama işlemi ile de başka bir olay tetikleyip örnekteki gibi bir işlem gerçekleştirebilirsiniz.
Bu konuyla alakalı veya her hangi bir Web konusunu hakkındaki bir konusunu aşağıdaki form üzerinden bana iletebilirsiniz. Sizlere en kısa süre içinde yardımcı olmaya çalışacağım. Herkese şimdiden iyi çalışmalar diliyorum.
