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');- A
- B
- C
- D
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