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');

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

Sıradaki ders: appendChild ve removeChild

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler