createElement ile öğe oluşturma
Yeni bir HTML öğesini oluşturup sayfaya eklemeyi öğrenirsin.
Yeni öğe oluşturma
JavaScript'te yeni bir HTML öğesi oluşturmak için document.createElement metodunu kullanırsın. Bu metod bir etiket adı alır ve o etiketten yeni bir öğe üretir.
const card = document.createElement('div');Oluşan öğe henüz sayfada değildir; bellekte durur. Sayfada görünmesi için onu mevcut bir öğeye eklemen gerekir. Etiket adı küçük harfle yazılır.
Öğeye metin ata
Oluşturduğun öğeye metin eklemek için textContent özelliğini kullanırsın. Bu özellik metni güvenli biçimde yerleştirir; HTML etiketleri metin olarak gösterilir.
const title = document.createElement('h1');
title.textContent = 'Merhaba';Önce öğeyi oluşturur, sonra özelliklerini ayarlarsın. Aynı yolla className, id gibi diğer özellikleri de verebilirsin. Öğeyi sayfaya eklemeyi sonraki derste göreceğiz.
Uygulama Başlık öğesi oluştur
heading adında bir değişken tanımla. document.createElement('h2') ile yeni bir başlık öğesi oluştur ve textContent özelliğine kısa bir metin ata.
Örnek çözümü göster
const heading = document.createElement('h2');
heading.textContent = 'Günlük';Kendini test et
-
Hangisi yeni bir <p> öğesi oluşturur?
// A const a = document.querySelector('p'); // B const b = document.createElement('p'); // C const c = document.getElementById('p'); // D const d = document.createTextNode('p');- A
- B
- C
- D
Cevabı göster
B — Doğru! createElement('p') yeni bir <p> öğesi üretir.
-
Yeni bir li öğesi oluştur
const item = document.____('li');Cevabı göster
const item = document.createElement('li'); -
Metotları anlamlarıyla eşleştir
- document.createElement('span')
- Yeni span öğesi üretir
- element.textContent = '...'
- Öğeye metin koyar
- document.querySelector('span')
- İlk span'ı seçer