DİNAMİK ELEMENT OLUŞTURMA #16


DİNAMİK ELEMENT OLUŞTURMA


Dinamik lik javascript’in oluşturulma amaçlarından biridir. Bizim html ve css ile oluşturduğumuz statik sayfaları dinamik hale getiren bir yapıdır javascript. Bu dersimizde ise dinamik olarak elementler oluşturup bunları html sayfamıza yine dinamik olarak ekleyeceğiz. Örneğin bir todo ekle butonuna basıldığında aşağıya bir todo eklemesi gibi.

Yine geçen derslerimizde olan todo-list projesinde kullanacağımız html sayfasını kullanacağım. Sizde buradan ona ulaşabilirsiniz.

Bizim html sayfamızda “Tüm Taskları Temizleyin” adında bir a etiketimiz aslında butonumuz var. Şimdi biz bunun aynısının soluna dinamik olarak bir element oluşturacağız. Yanına eklemek için öncelikle bu elementin hangi div ya da hangi parent elementin de olduğuna bakalım. Baktığımızda class’ı card-body olan bir div’in içerisinde olduğunu görürüz.

Yani burda ki a etiketimiz bu card-body ‘nin içinde, en sonda. Biz bu div’in en sonuna bir element daha ekleyeceğiz.

Sayfamızda iki tane class’ı card-body olan div var. Biz bunun ikincisini seçip elementimizi buraya eklemeye çalışacağız. Hemen kodlara geçelim. Ben öncelikle hemen hemen aynısını oluşturacağımız için bu elementi buraya yorum satırı olarak yazmak istiyorum.

CREATE ELEMENT METHODU


Yeni elementimizi oluşturmak için bir fonksiyonumuzu kullanacağız. Bu fonksiyonun adı createElement ‘tir. Ve bu fonksiyon bizim document objemizin içinden gelir. Yani;

Bu fonksiyon içine oluşturmak istediğimiz elementin ismini alır. Ben örnek olarak bir div etiketi oluşturup onu console’a yazdırdım. Bu fonksiyonun kullanımı bu şekildedir. Şimdi yapmak istediğimiz uygulamaya geri dönelim. Ben oluşturmak istediğim butona newLink adını vermek istiyorum. Bu oluşturduğumuz a elementini bir sabit yani bir const tanımlı değişkene atayacağım.

Artık elementimizi oluşturduk. Siz isterseniz bunu console’a yazdırıp kontrol edebilirsiniz. Sıradaki adım bu elementi koyacağımız div’i seçmektir. Ben getElementsByClassName methodunu kullanacağım siz isterseniz farklı yöntemler de deneyebilirsiniz.

Eğer biz direk card-body ‘i seçersek, bizim html sayfamızda iki tane card-body olduğu için karşımıza bir array gelecektir. Sıfırıncı indexi ilk card-body, birinci indexi ikinci card-body ‘dir. Bizim elementimizi ekleyeceğimiz yer ikinci card-body ‘ dir bu yüzden gelen array’den 1. indexi alarak bu elementi seçtik. Bu elementi card-body’e eklemeden önce bu elementi biraz şekillendirmemiz gerekiyor. Yani class vermemiz gerekiyor ki bootstrap kullandığımız için butonumuz şekillensin.

Burada elementimize çeşitli özellikler ekledik. Örnek olması açısından href özelliğine javascript sitesini verdimki özellikler geliyor mu görelim istedim. Daha sonra target _blank diyerek basılınca açılacak bu sayfanın yeni sekmede açılmasını belirttim. Daha sonra elementimizi seçeriz diye kolaylık açısından bu elemente id verdim ve bootstrap classlarını kullanarak bu a etiketini renkli bir buton haline getirdim.

Sırada bu etiketimizin içine bir yazı ekleme var. Bunun iki yöntemi var. Ben daha önceki derslerde bu olayı textContent ile yapmıştım. Önce bunu görelim daha sonra diğer yöntemden bahsedeyim.

-textContent  

textContent’i kullanarak bu işlemi yaptığımda ve bu etiketi console’a yazdırdığımda verdiğimiz özellikler ile etiketimiz karşımıza içinde yazı ile birlikte gelir. Ama bu yöntem her zaman mantıklı değildir. Çünkü eğer bu elementin içinde başka elementler de olacaksa biz bu textContent’i kullanırsak olan tüm elementleri silip yerine sadece girdiğimiz değeri yazacaktır. Bu yöntemi kullanmak her zaman mantıklı değildir. Bunun yerine textNode kullanmak daha mantıklıdır.

-textNode 

textNode yine document objemiz içinden gelen bir methodtur. Bunu newLink’in appendChild’ına yani son çocuğuna, sonuna, son kısmına ekleyerek işlemimizi tamamladık.

Artık son kısıma geldik. Elementimizi oluşturduk. Artık bunu card-body’nin içerisine eklemek kaldı. Yine appendChild methodunu kullanarak bu butonu ekleyerek dinamik olarak oluşturduğumuz bir elementi kullanmış olacağız.

Bu şekilde element oluşturup çeşitli yerlere ekleyebiliyoruz.

BİTİRİŞ


Bu dersimizin de burada sonuna gelmiş bulunuyoruz. Siz farklı farklı elementler oluşturup kendiniz denemeler ve uygulamalar da yapabilirsiniz. Görüşmek üzere.

Elementlerin Style Özelliklerini Değiştirme #15

[Toplam:1    Ortalama:5/5]

Sizin Tepkiniz Nedir?

süper süper
1
süper
bilgilendirici bilgilendirici
3
bilgilendirici
beğenmedim beğenmedim
0
beğenmedim
beğendim beğendim
0
beğendim
Düşündürücü Düşündürücü
0
Düşündürücü
Berkay

Yazılım ve Javascript adına kendini geliştirmekte olan ve bilgilerini paylaşmayı seven biri.

0 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir format seçin
Kişisel Test
Kişiliğe dair bir şey ortaya çıkarmayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar vermek veya görüş belirlemek için oylama yapmak
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın
Fotoyla Anlatım
Kendi resimlerinizi yükleyin ve birşeyler anlatın
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud veya Mixcloud İçerikleri
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı