0Pricing
Frontend Academy · Pelajaran

Membuat dan Menambahkan Elemen

Gunakan createElement, setAttribute, append, dan remove untuk membangun serta mengubah struktur DOM secara dinamis.

Membuat dan Menambahkan Elemen adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

createElement

document.createElement(tagName) membuat elemen baru di memori — elemen tersebut belum berada di DOM. Selanjutnya, tetapkan propertinya dan tambahkan elemen itu ke pohon.

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 dan appendChild

parent.append(child) menambahkan node atau string ke akhir child milik parent. appendChild adalah padanan yang lebih lama, tetapi append lebih fleksibel — dapat menerima beberapa node dan string.

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() menambahkan di awal. element.before() menyisipkan sebelum elemen. element.after() menyisipkan sesudahnya.

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) menyisipkan HTML pada posisi yang ditentukan tanpa mengganti konten yang sudah ada. Posisi: '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) membuat salinan mendalam dari sebuah elemen, termasuk semua anaknya. Berikan false untuk salinan dangkal. Berguna untuk menggandakan elemen template.

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

removeChild dan remove()

element.remove() menghapus elemen dari DOM. parent.removeChild(child) yang lebih lama juga tetap berfungsi. Elemen yang dihapus masih dapat direferensikan dalam variabel dan ditambahkan kembali.

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

replaceWith

oldElement.replaceWith(newElement) mengganti elemen lama di DOM dengan elemen baru. Lebih praktis daripada pola replaceChild yang lebih lama.

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

DocumentFragment untuk Penyisipan Massal

DocumentFragment adalah container ringan yang tidak ada di DOM. Bangun subtree di dalamnya, lalu append dalam satu operasi — ini hanya menyebabkan satu penataan ulang, bukan N.

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);

Elemen &lt;template&gt;

Elemen HTML <template> menyimpan markah yang tidak dirender sampai diklon dengan JavaScript. Lebih baik daripada membuat string atau mengklon elemen yang terlihat.

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

Mengatur Properti vs Atribut

Properti elemen (el.href, el.src, el.value) sering kali merupakan cara paling langsung dan paling efisien untuk menetapkan nilai. Atribut (setAttribute) paling cocok untuk atribut khusus atau ARIA yang tidak memiliki properti DOM yang sesuai.

// 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');

Menghindari innerHTML dengan Konten Pengguna

Saat membuat elemen dari data yang diberikan pengguna, selalu gunakan metode DOM (createElement, textContent, setAttribute), bukan membuat string HTML lalu menggunakannya dengan innerHTML. Jangan pernah menyisipkan input pengguna ke dalam string HTML.

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

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

Pemeriksaan Singkat

Anda perlu menambahkan 100 item daftar ke <ul> tanpa menyebabkan 100 penataan ulang. Pendekatan mana yang terbaik?

Ringkasan: Membuat Elemen DOM

createElement membuat elemen di memori. append/prepend/before/after menyisipkan elemen ke dalam pohon. remove() menghapus elemen. DocumentFragment mengelompokkan penyisipan demi kinerja. Elemen