JavaScript Academy · Ders

Metin ve HTML İçeriğini Değiştirme

İçeriği textContent ve innerHTML ile güncelleyin.

Metin ve HTML İçeriğini Değiştirme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Metin okuma ve yazma

Bir öğenin görüntülediği içeriği değiştirmek için metnini veya HTML'sini ayarlayabilirsiniz. Doğru seçim, işaretlemeye ihtiyaç duyup duymadığınıza ve verilere ne kadar güvendiğinize bağlıdır.

textContent

textContent, bir öğenin ham metnini alır veya ayarlar. Ayarlamak, tüm alt öğeleri tek bir metin düğümüyle değiştirir ve girdiyi düz metin olarak ele alır.

const el = document.querySelector("#status");
el.textContent = "Saved!";

textContent işaretlemeyi kaçışlar

Düz metin olduğu için dizedeki HTML, ayrıştırılmak yerine olduğu gibi görüntülenir. Bu, ekleme saldırılarına karşı güvenlik sağlar.

el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>

innerHTML

innerHTML, bir öğenin içindeki HTML işaretlemesini alır veya ayarlar. Ayarlamak, dizeyi HTML olarak ayrıştırır ve gerçek düğümler oluşturur.

const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";

innerHTML her şeyi değiştirir

innerHTML özelliğine değer atamak, mevcut alt öğeleri atar ve alt ağacı yeni işaretlemeden yeniden oluşturur.

box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";

XSS tehlikesi

Güvenilmeyen kullanıcı girdisini asla innerHTML içine koymayın. Kötü amaçlı bir dize, XSS adı verilen bir güvenlik açığı aracılığıyla betikler veya olay işleyicileri ekleyebilir.

const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;

innerText

innerText, textContent'e benzer; ancak stillerin farkındadır: oluşturulmuş metni yansıtır ve gizli öğeleri yok sayar.

console.log(el.innerText); // visible text only

textContent ve innerText

textContent, gizli içerik de dahil olmak üzere tüm metni döndürür ve düzeni tetiklemediği için daha hızlıdır. innerText düzenin farkındadır ve daha yavaştır.

el.textContent; // all text, even display:none
el.innerText;   // only what is visually rendered

Metni güvenli şekilde ekleme

Mevcut düğümleri silmeden metin eklemek için yeni bir metin düğümü oluşturun veya textContent'in üzerine yazmak yerine insertAdjacentText kullanın.

el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");

HTML'yi yeniden ayrıştırmadan ekleme

insertAdjacentHTML, tüm öğeyi yeniden ayrıştırmadan belirli bir konuma işaretleme ekler. Bu, innerHTML'yi yeniden oluşturmaktan daha verimlidir.

box.insertAdjacentHTML("beforeend", "<li>New item</li>");

Doğru özelliği seçme

Düz metin için textContent'i (güvenli varsayılanı), yalnızca güvenilir işaretlemeyle innerHTML'yi ve özellikle oluşturulmuş, visible metne ihtiyaç duyduğunuzda innerText'i kullanın.

Hızlı kontrol

Güvenli yaklaşımı seçin.

Özet

textContent, düz ve kaçışlanmış metin ayarlar ve güvenli varsayılandır. innerHTML işaretlemeyi ayrıştırır, ancak güvenilmeyen girdilerle XSS riski oluşturur. innerText yalnızca görünür ve oluşturulmuş metni yansıtır. İçerik eklemek için öğenin tamamının üzerine yazmak yerine insertAdjacentHTML/insertAdjacentText kullanmayı tercih edin.

Sıkça Sorulan Sorular

“Metin ve HTML İçeriğini Değiştirme” dersi ücretsiz mi?

Evet — “Metin ve HTML İçeriğini Değiştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Metin ve HTML İçeriğini Değiştirme” dersinde ne öğreneceğim?

İçeriği textContent ve innerHTML ile güncelleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Metin ve HTML İçeriğini Değiştirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön