JavaScriptYazılım

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.

// <a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>

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;

const div = document.createElement("div");
console.log(div);

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.

// <a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>
const newLink = document.createElement("a");

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.

// <a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>
const newLink = document.createElement("a");
const cardBody = document.getElementsByClassName("card-body")[1];

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.

// <a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a> 
const newLink = document.createElement("a"); 
const cardBody = document.getElementsByClassName("card-body")[1];

newLink.id = "clear-todos";
newLink.className = "btn btn-danger";
newLink.href = "https://www.javascript.com/";
newLink.target = "_blank";

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  
// <a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a> 
const newLink = document.createElement("a"); 
const cardBody = document.getElementsByClassName("card-body")[1]; 

newLink.id = "clear-todos"; 
newLink.className = "btn btn-danger"; 
newLink.href = "https://www.javascript.com/"; 
newLink.target = "_blank";
newLink.textContent = "Farklı sayfaya git";

console.log("newLink");

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 
// <a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a> 
const newLink = document.createElement("a"); 
const cardBody = document.getElementsByClassName("card-body")[1]; 

newLink.id = "clear-todos"; 
newLink.className = "btn btn-danger"; 
newLink.href = "https://www.javascript.com/"; 
newLink.target = "_blank"; 
newLink.textContent = "Farklı sayfaya git"; 
newLink.appendChild(document.createTextNode("Farklı Sayfaya Git"));

console.log("newLink");

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.

// <a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a> 
const newLink = document.createElement("a"); 
const cardBody = document.getElementsByClassName("card-body")[1]; 

newLink.id = "clear-todos"; 
newLink.className = "btn btn-danger"; 
newLink.href = "https://www.javascript.com/"; 
newLink.target = "_blank"; 
newLink.textContent = "Farklı sayfaya git"; 
newLink.appendChild(document.createTextNode("Farklı Sayfaya Git"));

cardBody.appendChild(newLink);

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

Oylamak için tıklayınız :
[Toplam: 0 Puan: 0]
Etiketler

İlgili Makaleler

Bir cevap yazın

Başa dön tuşu
Kapalı

Reklam Engelleyici Algılandı !

Reklam engelleyiciyi kapatarak bize destek olabilirsiniz..