- Konu sahibi
- #1
JavaScript’te
Bir elementin içeriğini okumak için:
İçeriği değiştirmek için:
Bu işlemden sonra
Aşağıdaki dosyayı
Beklenen sonuç, sayfada kalın yazılmış “İşlem tamamlandı” metni ve altında ikinci satırın görünmesidir. Yazı görünmüyorsa önce
Hangi özelliği seçeceğiniz, verinin HTML olarak mı yoksa yalnızca yazı olarak mı kullanılacağına bağlıdır.
Örneğin kullanıcıdan gelen
Bu kullanımda içerik etiket olarak çalıştırılmaz; kullanıcıya yazı olarak gösterilir.
Sitenin CSP politikası Trusted Types zorunlu kılıyorsa doğrudan string ataması reddedilebilir. Politikayı kapatmak yerine uygulamanın belgelenen ve gerçekten sanitizasyon yapan TrustedHTML üretim yolunu kullanın; yalnız metin için normal bir içerik öğesinin
Bu yolla eklenen
innerHTML, bir HTML elementinin içindeki HTML kodunu okumaya veya o elementin alt içeriğini yeni HTML ile değiştirmeye yarayan özelliktir. Okurken alt düğümlerin HTML olarak serileştirilmiş metnini döndürür; bu, kaynak dosyanın birebir kopyası olmak zorunda değildir. Yazarken verilen string HTML olarak ayrıştırılır ve elementin mevcut alt düğümleri kaldırılıp yenileri oluşturulur.Temel kullanım
Bir elementin içeriğini okumak için:
Kod:
<div id="kutu"><strong>Merhaba</strong></div>
<script>
const kutu = document.querySelector("#kutu");
console.log(kutu.innerHTML);
// <strong>Merhaba</strong>
</script>İçeriği değiştirmek için:
Kod:
kutu.innerHTML = "<p>Yeni içerik</p>";Bu işlemden sonra
#kutu elementinin içeriği <p>Yeni içerik</p> olur. Önceden içeride bulunan alt elementler silinir; yalnızca dıştaki #kutu elementi korunur.Çalıştırılabilir en küçük örnek
Aşağıdaki dosyayı
innerhtml.html adıyla kaydedip tarayıcıda açabilirsiniz:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>innerHTML örneği</title>
</head>
<body>
<div id="sonuc"></div>
<script>
const sonuc = document.querySelector("#sonuc");
sonuc.innerHTML = "<strong>İşlem tamamlandı</strong><br>HTML içeriği oluşturuldu.";
</script>
</body>
</html>Beklenen sonuç, sayfada kalın yazılmış “İşlem tamamlandı” metni ve altında ikinci satırın görünmesidir. Yazı görünmüyorsa önce
id="sonuc" değerinin JavaScript’teki seçiciyle aynı olduğunu, ardından script’in elementten sonra çalıştığını kontrol edin. Script head içinde çalışıyorsa #sonuc henüz oluşmamış olabilir; script’i body sonunda çalıştırmak bu örnekteki en basit çözümdür.innerHTML, textContent ve innerText farkı
Hangi özelliği seçeceğiniz, verinin HTML olarak mı yoksa yalnızca yazı olarak mı kullanılacağına bağlıdır.
| Özellik | Ne yapar? | Ne zaman kullanılmalı? |
|---|---|---|
innerHTML | HTML okur veya HTML olarak yazar. | Güvenilir bir şablon içinde element üretirken. |
textContent | Ham metni okur veya metin olarak yazar. | Kullanıcıdan gelen içeriği düz yazı göstermek için. |
innerText | Görünen metni, ekrandaki görünüme göre ele alır. | Görünen metni okumak gerektiğinde. |
ad değerini HTML içine doğrudan eklemek yerine güvenli düz metin olarak göstermek için:
Kod:
const ad = '<img src=x onerror=alert(1)>';
document.querySelector("#sonuc").textContent = ad;Bu kullanımda içerik etiket olarak çalıştırılmaz; kullanıcıya yazı olarak gösterilir.
innerHTML içine güvenilmeyen kullanıcı verisini doğrudan koymak, zararlı HTML veya olay öznitelikleri üzerinden XSS riskine yol açabilir. HTML eklemek gerçekten gerekiyorsa veri önce uygun bir sanitizasyon sürecinden geçirilmeli veya güvenli HTML üretimi sağlayan bir yaklaşım kullanılmalıdır.Uygulamada dikkat edilecek noktalar
innerHTML = ...atamasının elementin mevcut alt içeriğini tamamen değiştirdiğini hesaba katın.- Yeni içerik yalnızca yazıysa
textContentkullanın. - HTML olarak eklenen içerikte kullanıcı girdisini, URL parametresini veya sunucudan doğrulanmamış veriyi doğrudan birleştirmeyin.
- İçerik değiştirildiğinde eski alt elementlere bağlanmış olay dinleyicilerinin kaybolabileceğini unutmayın; gerekiyorsa olay dinleyicilerini yeni düğümlere tekrar bağlayın veya olay devrini kullanın.
- Yalnızca mevcut içeriğin sonuna HTML eklemek istiyorsanız tüm içeriği yeniden kurmak yerine amaca uygun DOM yöntemlerini değerlendirin.
Sık sorulan sorular
Atamada Trusted Types kaynaklı TypeError çıkarsa ne yapılmalı?
Sitenin CSP politikası Trusted Types zorunlu kılıyorsa doğrudan string ataması reddedilebilir. Politikayı kapatmak yerine uygulamanın belgelenen ve gerçekten sanitizasyon yapan TrustedHTML üretim yolunu kullanın; yalnız metin için normal bir içerik öğesinin
textContent özelliğini değerlendirin.innerHTML ile eklenen script etiketi çalışır mı?
Bu yolla eklenen
script öğeleri çalıştırılmaz. Bu durum innerHTML için genel bir güvenlik filtresi değildir: onerror gibi olay öznitelikleri ve başka enjeksiyon yolları risk oluşturabilir. Güvenilmeyen HTMLyi doğrudan atamayın.