0Pricing
Frontend Academy · Ders

Öğe Oluşturma ve Ekleme

DOM yapısını dinamik olarak oluşturup değiştirmek için createElement, setAttribute, append ve remove kullanın.

Öğe Oluşturma ve Ekleme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

createElement

document.createElement(tagName), bellekte yeni bir öğe oluşturur; öğe henüz DOM'da değildir. Ardından özelliklerini ayarlayıp ağaca ekleyebilirsiniz.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append ve appendChild

parent.append(child), bir düğümü veya dizeyi parent öğesinin alt öğelerinin sonuna ekler. appendChild daha eski eşdeğeridir; ancak append daha esnektir ve birden çok düğüm ile dizeyi kabul eder.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() başlangıca ekler. element.before() element öncesine ekler. element.after() onun sonrasına ekler.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) mevcut içeriği değiştirmeden, belirtilen bir konuma HTML ekler. Konumlar: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true), tüm alt öğeleri de dahil olmak üzere bir elementin derin kopyasını oluşturur. Sığ bir kopya için false iletin. Şablon elementlerini çoğaltmak için kullanışlıdır.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild ve remove()

element.remove() elementi DOM'dan kaldırır. Daha eski parent.removeChild(child) yöntemi de çalışır. Kaldırılan elementlere değişkenler üzerinden hâlâ başvurulabilir ve bunlar yeniden eklenebilir.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement), DOM'daki eski elementi yenisiyle değiştirir. Eski replaceChild kalıbından daha kullanışlıdır.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

Toplu Eklemeler için DocumentFragment

DocumentFragment, DOM'da bulunmayan hafif bir kapsayıcıdır. İçinde bir alt ağaç oluşturun, ardından tek bir işlemle ekleyin — böylece N yerine yalnızca bir yeniden akış gerçekleşir.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

&lt;template&gt; Elementi

HTML <template> elementi, JavaScript ile clone edilene kadar oluşturulmayan işaretlemeyi tutar. Dize oluşturmaktan veya görünür elementleri clone etmekten daha iyidir.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Özellikleri Ayarlama ve Öznitelikleri Kullanma

Element özellikleri (el.href, el.src, el.value), değerleri ayarlamanın çoğu zaman en doğrudan ve performanslı yoludur. Öznitelikler (setAttribute), karşılık gelen bir DOM özelliği bulunmayan özel veya ARIA öznitelikleri için en uygunudur.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

Kullanıcı İçeriğiyle innerHTML Kullanımından Kaçınma

Kullanıcı tarafından sağlanan verilerden element oluştururken HTML dizesi oluşturup innerHTML kullanmak yerine her zaman DOM yöntemlerini (createElement, textContent, setAttribute) kullanın. Kullanıcı girdisini HTML dizelerine asla yerleştirmeyin.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Kısa Kontrol

100 yeniden akışa neden olmadan bir <ul> elementine 100 liste öğesi eklemeniz gerekiyor. En iyi yaklaşım hangisidir?

Özet: DOM Elementleri Oluşturma

createElement bellekte oluşturur. append/prepend/before/after, ağaç yapısına ekler. remove() bir elementi siler. DocumentFragment, performans için eklemeleri toplu hâle getirir.