innerHTML ve insertAdjacentHTML

innerHTML ile içerik değiştirmeyi ve insertAdjacentHTML ile konumlu ekleme yapmayı öğrenirsin.

innerHTML ile içerik

Bir öğenin içindeki HTML'i bir dize olarak okumak ya da değiştirmek için innerHTML özelliğini kullanırsın. Atama yapınca tarayıcı dizeyi HTML olarak yorumlar.

const box = document.querySelector('.box');
box.innerHTML = '<strong>Merhaba</strong>';

Bu özellik güçlüdür ama kullanıcıdan gelen metni doğrudan koyarsan güvenlik açığı oluşur. Güvenmediğin veride textContent tercih et.

insertAdjacentHTML ile konumlu ekleme

insertAdjacentHTML metodu, bir öğeye göre dört konumdan birine HTML dize ekler. Konum adları şunlardır: 'beforebegin' öğeden önce, 'afterbegin' içine en başa, 'beforeend' içine en sona, 'afterend' öğeden sonra.

const list = document.querySelector('ul');
list.insertAdjacentHTML('beforeend', '<li>Yeni</li>');

Var olan içeriği değiştirmez; yanına ekler. innerHTML gibi HTML ayrıştırır; güvenmediğin veride kullanma.

Uygulama Listeye HTML dize ekle

list değişkeni bir <ul> öğesini gösteriyor. insertAdjacentHTML metodunu kullanarak 'beforeend' konumuna '<li>Yeni öğe</li>' dizesini ekle.

Örnek çözümü göster

list.insertAdjacentHTML('beforeend', '<li>Yeni öğe</li>');

Kendini test et

Hangisi box içine bir <p> koyar?

const box = document.querySelector('.box');
// A
box.textContent = '<p>Merhaba</p>';
// B
box.innerHTML = '<p>Merhaba</p>';
// C
box.setAttribute('p', 'Merhaba');
// D
box.classList.add('p');

Cevabı göster

B — Doğru! innerHTML, dizeyi HTML olarak yorumlar.

İçeriği HTML olarak değiştir

const box = document.querySelector('.box');
box.____ = '<em>vurgu</em>';

Cevabı göster

const box = document.querySelector('.box');
box.innerHTML = '<em>vurgu</em>';

Konumları eşleştir

beforebegin

Öğeden önce
afterbegin

İçine en başa
beforeend

İçine en sona
afterend

Öğeden sonra

Sıradaki ders: Özet - DOM manipülasyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler