JavaScript Academy · Ders

Öğe Oluşturma ve Ekleme

createElement ve append ile yeni düğümler oluşturun.

Öğe Oluşturma ve Ekleme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. 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.

Yeni öğeler oluşturma

HTML dizeleri yazmak yerine öğeleri kod içinde oluşturabilirsiniz. Bu, XSS'ten kaçınmanızı sağlar ve yapılandırabileceğiniz gerçek bir öğe başvurusu verir.

createElement

document.createElement, yeni ve ayrılmış bir öğe oluşturur. Öğe bellekte vardır, ancak henüz sayfada değildir.

const li = document.createElement("li");
li.textContent = "New item";

Eklemeyi gerçekleştirmeden önce yapılandırma

Öğe hâlâ DOM'dan ayrılmış durumdayken sınıflarını, özniteliklerini ve içeriğini ayarlayın. Öğe ancak eklediğinizde görünür olur.

const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";

append

append, düğümleri (veya dizeleri) bir öğenin son alt öğeleri olarak ekler. Birden fazla bağımsız değişken alabilir.

const list = document.querySelector("ul");
list.append(li);

prepend

prepend, düğümleri ilk alt öğeler olarak ekler ve mevcut alt öğeleri aşağı iter.

list.prepend(document.createElement("li"));

append Dizeleri Kabul Eder

Daha eski appendChild'dan farklı olarak append, düz dizeleri ve birden fazla bağımsız değişkeni aynı anda alabilir.

const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");

appendChild

appendChild, klasik yöntemdir. Yalnızca tek bir düğüm kabul eder ve bu düğümü döndürür; append ise tanımsız döndürür.

const node = list.appendChild(document.createElement("li"));

insertBefore

insertBefore, yeni bir düğümü belirli bir mevcut alt öğenin önüne yerleştirerek kesin konumlandırma sağlar.

const ref = list.children[1];
list.insertBefore(li, ref);

insertAdjacentElement

insertAdjacentElement, beforebegin, afterbegin, beforeend ve afterend gibi konumları kullanarak bir öğeye göre ekleme yapar.

ref.insertAdjacentElement("beforebegin", li);

Toplu İşlemler için DocumentFragment

Çok sayıda öğe eklerken önce bunları bir DocumentFragment içinde oluşturun, ardından tek seferde ekleyin. Bu, yeniden akışları en aza indirir ve daha hızlıdır.

const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Row " + i;
  frag.append(item);
}
list.append(frag);

cloneNode

cloneNode(true), bir öğeyi ve alt öğelerini kopyalar; tekrarlanan yapılar için şablon oluştururken kullanışlıdır.

const copy = li.cloneNode(true);
list.append(copy);

Hızlı Kontrol

En uygun tekniği seçin.

Özet

Ayrılmış öğeler oluşturmak ve yapılandırmak için createElement kullanın. Ardından bunları append/prepend (dizelere ve birden fazla bağımsız değişkene izin verilir), appendChild (tek düğüm) veya kesin konumlar için insertBefore/insertAdjacentElement ile ekleyin. Çok sayıda ekleme işlemini bir DocumentFragment üzerinden toplu olarak gerçekleştirin ve yapıları cloneNode(true) ile yeniden kullanın.

Sıkça Sorulan Sorular

“Öğe Oluşturma ve Ekleme” dersi ücretsiz mi?

Evet — “Öğe Oluşturma ve Ekleme” 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.

“Öğe Oluşturma ve Ekleme” dersinde ne öğreneceğim?

createElement ve append ile yeni düğümler oluşturun. 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 2. dersidir.

“Öğe Oluşturma ve Ekleme” 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