JavaScript Academy · Pelajaran

Membuat dan Menyisipkan Elemen

Buat simpul baru dengan createElement dan append.

Membuat dan Menyisipkan Elemen adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Membangun Elemen Baru

Daripada menulis string HTML, Anda dapat membuat elemen melalui kode. Cara ini mencegah XSS dan memberi Anda referensi elemen sungguhan untuk dikonfigurasi.

createElement

document.createElement membuat elemen baru yang terlepas. Elemen tersebut ada di memori, tetapi belum berada di halaman.

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

Mengonfigurasi Sebelum Menyisipkan

Atur kelas, atribut, dan konten saat elemen masih terlepas. Elemen tersebut baru terlihat setelah Anda menyisipkannya.

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

append

append menambahkan simpul (atau teks) sebagai anak terakhir dari suatu elemen. Metode ini dapat menerima beberapa argumen.

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

prepend

prepend menyisipkan simpul sebagai anak pertama, sehingga anak yang sudah ada terdorong ke bawah.

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

append Menerima Teks

Berbeda dari appendChild yang lebih lama, append dapat menerima teks biasa dan beberapa argumen sekaligus.

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

appendChild

appendChild adalah metode klasik. Metode ini hanya menerima satu simpul dan mengembalikannya, sedangkan append mengembalikan undefined.

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

insertBefore

insertBefore menempatkan simpul baru sebelum anak tertentu yang sudah ada, sehingga posisinya dapat diatur dengan tepat.

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

insertAdjacentElement

insertAdjacentElement menyisipkan elemen relatif terhadap suatu elemen menggunakan posisi seperti sebelum awal, setelah awal, sebelum akhir, dan setelah akhir.

ref.insertAdjacentElement("beforebegin", li);

DocumentFragment untuk Kelompok Penyisipan

Saat menambahkan banyak elemen, buat elemen-elemen tersebut terlebih dahulu dalam DocumentFragment, lalu sisipkan sekaligus. Cara ini meminimalkan penataan ulang dan lebih cepat.

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) menyalin sebuah elemen beserta turunannya, sehingga berguna untuk membuat struktur berulang dari templat.

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

Pemeriksaan Cepat

Pilih teknik yang paling tepat.

Ringkasan

Gunakan createElement untuk membuat elemen yang terlepas, mengaturnya, lalu menyisipkannya dengan append/prepend (teks diperbolehkan, beberapa argumen), appendChild (satu simpul), atau insertBefore/insertAdjacentElement untuk posisi yang tepat. Kelompokkan banyak penyisipan melalui DocumentFragment, dan gunakan kembali struktur dengan cloneNode(true).

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat dan Menyisipkan Elemen” gratis?

Ya — teks lengkap “Membuat dan Menyisipkan Elemen” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuat dan Menyisipkan Elemen”?

Buat simpul baru dengan createElement dan append. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Membuat dan Menyisipkan Elemen” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy